Animations, a tale of three frameworks

on YouTube ↗28m

" summary

Demo ported from Vue/Next and React into Angular Universal to reproduce native‑like page transitions using Angular animations for page-level enter/leave and GreenSock (GSAP) to morph SVG icons. Solves SVG pitfalls by using attribute selectors for fill and namespacing; hits a troubleshooting snag with GSAP breaking production builds (had to disable build optimizer) and Mapbox incompatibilities that required rebuilding. Deployment tweaks—HTTP/2, nginx, gzip and font preloading—push performance to 75 Lighthouse score.

AI-written summary · about

" chapters (12)

1. 0:00Introduction to project
2. 1:04Purpose of animations
3. 3:30CSS transitions explained
4. 5:59Vue transition group demo
5. 8:29Angular animations module
6. 12:27SVG animations overview
7. 15:22GreenSock for SVG movement
8. 18:41SVG component challenges
9. 20:08Adding Angular Universal
10. 23:24Lighthouse performance tips
11. 25:58React and Next.js port
12. 26:19Conclusion and takeaways

" related talks

• 26mAdvanced Angular AnimationsElad Bezalel · AngularUP 2019
• 32mThe Best of ngAnimate in AngularJSMatias Niemelä · GOTO Chicago 2014
• 44mLively Applications with Angular AnimationsTimo Korinth · International PHP Conference Spring 2018
• 36mNext-level Vue AnimationsSarah Drasner · Vue Fes Japan 2018
• 38mNext Level UI Building Blocks With Angular2Matias Niemelä · Web Unleashed 2016
• 13mBringing Angular to Life with AnimationsZachary Ng · NG-MY 2019
• 24mAnimating with VueRamona Biscoveanu · JSWorld Conference 2022
• 18mYet another way to animate in AngularDouglas Duteil · ng-europe 2014