Next-level Vue Animations

on YouTube ↗36m

" summary

Covers concrete techniques and working demos: Vue's transition component with modes for coordinated page swaps, transition-group with FLIP for smooth reflows, JavaScript hooks wired to GSAP (including SplitText and timelines) for per-word/character motion, and custom directives that replace Waypoints/ScrollMagic. Shows a modal + background blur, an ecommerce add-to-cart animation, a Wally SVG interaction driven by requestAnimationFrame, and a Three.js globe fed from serverless Google Maps geocoding and Stripe checkout — all open-source and functioning.

AI-written summary · about

" chapters (11)

1. 0:00Introduction to animations
2. 3:56Vue transition component
3. 10:20CSS animations in Vue
4. 11:24JavaScript animation hooks
5. 14:32Transition group and FLIP
6. 17:19Vue reactivity and watchers
7. 25:13State coordination with VueX
8. 27:02Custom directives for animation
9. 29:13Next.js page transitions
10. 33:07Serverless data visualizations
11. 35:35Closing thoughts and Q&A

" related talks

• 32mAnimating VueSarah Drasner · ReactiveConf 2017
• 35mAnimating VueSarah Drasner · You Gotta Love Frontend 2017
• 31mAnimation and Vue.jsCallum Macrae · Vue.js London Live 2021
• 24mAnimating with VueRamona Biscoveanu · JSWorld Conference 2022
• 36mVue in MotionRachel Nabors · VueConf US 2018
• 27mAdvanced animations with Vue.js: taking your interface to the next levelKrystal Campioni · Laracon EU 2018
• 31mThe Future of Web AnimationSarah Drasner · VueConf US 2019
• 39mThe Future of Web AnimationSarah Drasner · DinosaurJS 2019