Skip to content

Instantly share code, notes, and snippets.

@jimmynotjim
Last active October 15, 2015 19:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jimmynotjim/30881fc7fb4d8285f31f to your computer and use it in GitHub Desktop.
Save jimmynotjim/30881fc7fb4d8285f31f to your computer and use it in GitHub Desktop.
CFPB Animation Workshop

Animation Workshop

Ideas

  • Animate an SVG
    • Animate an icon or illustration
  • Animate a font-icon
    • Animate the loading icon
  • Animate DOM Elements
    • Animate the v1 menu
    • Animate notificaitons

Animation Code

  • CSS
    • CSS Transitions
      • Animate a bg color
      • Animate an icon
      • Animate a dropdown menu
      • Animate an off-screen menu
    • CSS Keyframe Animations
      • Animate an icon
      • Animate a shaking notification
  • SVG
    • Animate an icon
    • Animate an illustration
  • JS
    • Animate a dropdown menu
    • Animate an off-screen menu

General Rules of Animation

???

References

General

SVG

CSS

JS

Visual

@contolini
Copy link

We should try and do this as a nodeschool workshop. Most of their tutorials are on the command line but there are a couple, like shader-school and WebGL, that run in the browser. Relevant: https://github.com/lakenen/browser-workshopper

@jimmynotjim
Copy link
Author

@contolini because we have a bunch of people unfamiliar with nodeschool workshops, I was thinking something closer to our Bocoup training, but where the problems and answers are all in a repo that's easily cloned and branches checked out.

@contolini
Copy link

Perceived performance is a really interesting topic:

[Polar, an app,] introduced a short spinner to show users when polls were loading. Feedback immediately started pouring in about how loading new polls felt so much slower than before, despite the fact that it was actually much faster. Polar quickly released a patch removing the spinner, and people were impressed by how much faster polls loaded.

As designers and developers, our goal shouldn’t just be to create the fastest site mathematically; it should also be to create the fastest site experientially.

@contolini
Copy link

George has a great baggage claim story.

@designlanguage
Copy link

You can read the story here. Definitely related to perceived performance.

@ascott1
Copy link

ascott1 commented Oct 15, 2015

It's a haphazard mess, but John Kricfalusi's blog (the creator of Ren & Stimpy) is a treasure trove of animation advice if you're willing to wade through it.

This post on background art is one of my favorites.

@ascott1
Copy link

ascott1 commented Oct 15, 2015

Transitional Interfaces by Pasquale D’Silva was a huge influence on Jen and I when we were working on eRegs animations.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment