Animation Workshop

Either 20+20 min, or 40 min duration. Audience has disparate previous experience with web development.

Purpose: To inspire developers to more often take advantage of animation in order to make UIs easier to understand and delightful to use.

Open questions:

  • Computer access?
  • Wifi access?
  • Projector access?
  • Who want's to join and help?

Gameplan

  • 5-10 min introduction to animation and the workshop
  • Participants study and try to recreate a set of premade animations
  • Free experimentation and expression
  • Closing thoughts and remarks

What needs to be done?

  • Prepare intro presentation
  • Prepare example animations and resources
    • Codepen? Custom website? Svgs? Images? Colors? Code? External links?
  • Find partner in crime
  • Author title and flavor-text

Possible animations

  • Contracting top menu
  • Image library cascading reveal
  • Hamburger menu
  • loading bar
  • spinner
  • modal reveal

Introduction

  • Cheat sheet
  • Why animate?
  • Making performant animations
    • 16 ms
    • Performance-tab in chrome dev tools