Web Animation: from Disney to SASS
summary
Four-circle staggered loader is implemented three ways and the result works: pure CSS generated with a SASS mixin that computes keyframe percentages, GSAP timelines that stagger and allow runtime control and reversing, and the Web Animation API that creates the offsets at runtime. Key specs are cycle: 1s, movement: 0.5s, stagger time: 0.15s. CSS hits the animation-delay pitfall and balloons CSS size, GSAP is concise and dynamic, WAPI sits between.
AI-written summary · about
chapters (13)
- 0:00Start
- 2:18The Lion King
- 2:38The Lion King
- 3:36The Illusion of Life
- 4:13Follow Through and Overlapping Action
- 7:23Staggered Motion
- 7:43Material Design
- 10:27Pros
- 11:42Recap on Css Animations
- 14:07Key Frames
- 17:56Pros and Cons
- 19:59Timeline
- 21:31Dynamic Animations
