Making Mira: an Intro to Animating the Web
summary
Builds a working web Mira (Pixar Alonso Martinez toy) in Ember.js and demonstrates exactly how it’s done: shape with border-radius elliptical corners, head/eyes as divs, CSS transitions for look/tilt, CSS animations for pulsing and jump, and a blink driven by ember-concurrency blink task. Uses ember-animated FLIP move/receive sprites to smoothly move mirrors between lists and routes (Colosseum/Vatican) and experiments with the Web Animations API plus a spring-to-keyframe via Web Animations API converter; everything animates and the interactions work as shown.
AI-written summary · about
chapters (11)
- 0:00Introduction to Mira
- 1:46Building Mira's shape
- 4:56CSS transitions basics
- 8:13Animating Mira's eyes
- 9:59CSS animations overview
- 12:28Advanced easing techniques
- 15:38Adding auto animations
- 17:24Animating element groups
- 20:56Route transitions in Ember
- 23:24Advanced animation tech
- 26:00Q&A
