'Web Animations: Past, Present & Future'

on YouTube ↗19m

" summary

Overview of web animation history from GIFs (1987), SMIL (1999) and Flash (1996, deprecated by 2020) to CSS animations (circa 2009) and the modern Web Animations API. Demonstrates a blinking-cat built with keyframes and the API that works interactively when clicked, explains the Animation constructor (play, pause, reverse, finish, cancel), shows a scroll-synced Mac-like sequence built with timelines and GreenSock/ScrollTrigger, recommends vector Lottie files for performance, and notes Chrome’s experimental page transitions behind flag in Chrome 104.

AI-written summary · about

" chapters (10)

1. 0:00Animations matter on web
2. 1:04Early web animations and Flash
3. 3:10CSS animations and transitions
4. 4:14Web Animations API basics
5. 7:23Stateless animations with JS
6. 10:55Advanced WAAPI features
7. 13:43GSAP synchronization
8. 15:47Lottie animations
9. 16:50Page transitions API
10. 18:58Accessibility and closing

" related talks

• 15mWeb Animations: Tools and TechniquesRachel Nabors · SquiggleConf 2024
• 28mSweet Web Animations APIRodolfo Dias · code.talks commerce 2018
• 22mSweet Web Animations APIRodolfo Dias · FrontEnd Con 2018
• 39mThe Future of Web AnimationSarah Drasner · DinosaurJS 2019
• 46mThe Web in MotionRachel Nabors · Front-Trends 2016
• 44mPractical Web AnimationLisi Linhart · Pixel Pioneers Bristol 2019
• 39mReturn to Web Animation WonderlandRachel Nabors · CascadiaJS 2024
• 01h 00mAnimating Web ExperiencesJohn Allsopp · Web Directions South 2013