Animating Vue

on YouTube ↗32m

" summary

Concrete claims and working demos: Vue’s transition component and transition-group produce smooth enter/leave and FLIP animations; JavaScript hooks plus Watchers drive timelines and let CSS fall away; custom directives hook scroll and d3 behaviors; Vuex shares animation state across components; threejs plus a serverless function feeds a live globe. Built examples include a map-marker→contact-form transform, an SVG chart without external chart libraries, and page transitions — all shown working in the demos.

AI-written summary · about

" chapters (7)

1. 0:00Start
2. 2:27Gain understanding
3. 2:49Without Transitions
4. 3:21Morphing
5. 13:18FLIP, with no heavy lifting!
6. 17:28What is Reactive?
7. 29:26JS Hooks

" related talks

• 32mAnimating Vue How capable and elegant is Vue js in terms of animationSarah Drasner · Frontend Developer Love 2018
• 36mNext-level Vue AnimationsSarah Drasner · Vue Fes Japan 2018
• 35mAnimating VueSarah Drasner · You Gotta Love Frontend 2017
• 36mVue in MotionRachel Nabors · VueConf US 2018
• 24mAnimating with VueRamona Biscoveanu · JSWorld Conference 2022
• 31mAnimation and Vue.jsCallum Macrae · Vue.js London Live 2021
• 31mThe Future of Web AnimationSarah Drasner · VueConf US 2019
• 28mExploring Vue3's Built-In ComponentsPaige Kelley · Vue.js Nation 2023