Animating Vue

on YouTube ↗35m

" summary

Shows exactly what was built and how it behaves: a modal that blurs the background using Vue’s Transition component with mode "out-in", JS hooks with CSS false and requestAnimationFrame for a bouncing ball, a TransitionGroup-backed FLIP list so 100 items animate smoothly, a custom v-tac scroll directive that replaces ScrollMagic, SVG charts updated via Watchers (no D3 required for axes), Vuex-driven app state, a serverless Azure function that geocodes entries via Google Maps API, caches results, writes a GitHub file and feeds a threejs globe showing NASA fireball data — all demos run live.

AI-written summary · about

" chapters (6)

1. 0:00Start
2. 11:34CSS Animation
3. 12:13JavaScript Hooks
4. 16:30Leverage the Reactivity System for Transitions
5. 25:16Custom Directives
6. 27:45Nuxt Routing & Page Transitions

" related talks

• 32mAnimating VueSarah Drasner · ReactiveConf 2017
• 36mNext-level Vue AnimationsSarah Drasner · Vue Fes Japan 2018
• 36mVue in MotionRachel Nabors · VueConf US 2018
• 30mAnimating Vue with GSAPJ.D. Hillen · Connect.Tech 2021
• 27mAdvanced animations with Vue.js: taking your interface to the next levelKrystal Campioni · Laracon EU 2018
• 31mAnimation and Vue.jsCallum Macrae · Vue.js London Live 2021
• 24mAnimating with VueRamona Biscoveanu · JSWorld Conference 2022
• 32mAnimating Vue How capable and elegant is Vue js in terms of animationSarah Drasner · Frontend Developer Love 2018