Designing Meaningful Animation
summary
Argues for using more purposeful animation on the web and shows concrete techniques: a live CSS example of a modal built for a cat café uses custom cubic-bezier curve easing, explicit keyframes and short child animations to exercise timing and spacing, produce follow-through overshoot and add secondary action. Code changes are tiny — 0.3s motions, 0.15s fades, 0.2s delays — and inspected with Chrome and Firefox animation tools, producing noticeably more energetic, cohesive motion that demonstrably works in the browser.
AI-written summary · about
chapters (10)
- 0:00Start
- 8:34Animation Principle: Timing & Spacing
- 9:11Timing The amount of time it takes for an action to happen. The duration
- 10:25Spacing The changes in speed over the duration of the action's timing.
- 11:53Timing & Spacing Makes animated objects appear to obey the
- 20:17Animation Principle: Follow Through
- 23:06Animation Principle: Secondary Action
- 23:46Secondary Action Supplemental action, reinforces and adds dimension.
- 35:24Expressing Your Brand In Motion
- 35:53Match design adjectives to animation styles
