CFPB Animation Workshop

ideas.md

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

• Stop Gratuitous UI Animation
• Your UI isn't a Disney Movie

SVG

• The State of SVG Animation

CSS

• Cube Grid in Pure CSS
• Animating SVGs with CSS

JS

• Vivus
• Web Animation using JS
• Velocity JS
• VelocityReact Library

Visual

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

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.

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