Animating Vue with GSAP
summary
Demonstrates using GSAP inside Vue to build a music-browser UI with grid thumbnails, animated staggered entry and animate-out page transitions that call routing in an onComplete callback, proving transitions run before navigation. Shows performance comparisons — 71 FPS vs 0.8 FPS for jQuery test — and notes the core bundle is 63k. Uses timelines, custom eases, SplitText and scroll plugins, utils like random/shuffle/mapRange and delayedCall, and registers reusable effects (fade); the examples run live in the demo.
AI-written summary · about
chapters (9)
- 0:00Introduction to GSAP
- 3:36GSAP installation and basics
- 9:48Timelines and advanced control
- 13:19Animating Vue components
- 19:59Page transitions with GSAP
- 21:42Custom effects and events
- 23:12Split text animation
- 25:19GSAP showcase and resources
- 27:05Q&A
