Vue in Motion

on YouTube ↗36m

" summary

Shows concrete Vue animation patterns: using transition and transition-group with named CSS hooks, the FLIP move class for smooth list reflow, and JavaScript hooks wired to the Web Animations API (calling done on finish). Demonstrations include scoping animations behind a runtime toggle and honoring prefers-reduced-motion, with a working example that zeroes durations for accessibility. Live demos are improvised on an iPad/Chromebook after a laptop GPU failure so some visuals are patched but the code patterns and accessibility solution are fully implemented.

AI-written summary · about

" chapters (12)

1. 0:00Introduction
2. 2:31Animation is necessary
3. 4:02CSS Transitions
4. 6:09Anatomy of Vue Animations
5. 7:48Hooks for Animating with CSS
6. 12:38Transition Groups
7. 15:23Managing toggling elements
8. 18:56Animating static elements
9. 21:20JavaScript Animation Hooks
10. 26:22Accessible Animations
11. 30:27DIY Animation Controls
12. 33:58What about JavaScript?

" related talks

• 31mAnimation and Vue.jsCallum Macrae · Vue.js London Live 2021
• 36mNext-level Vue AnimationsSarah Drasner · Vue Fes Japan 2018
• 32mAnimating VueSarah Drasner · ReactiveConf 2017
• 31mThe Future of Web AnimationSarah Drasner · VueConf US 2019
• 35mAnimating VueSarah Drasner · You Gotta Love Frontend 2017
• 39mThe Future of Web AnimationSarah Drasner · DinosaurJS 2019
• 32mAnimating Vue How capable and elegant is Vue js in terms of animationSarah Drasner · Frontend Developer Love 2018
• 31mThe Future of Web AnimationSarah Drasner · JSHeroes 2019