The Best of ngAnimate in AngularJS

on YouTube ↗32m

" summary

Shows how ngAnimate orchestrates CSS transitions, keyframes and JS callbacks so animations run reliably with ngRepeat, ngView, ngIf, ngShow/ngHide; demos include a GitHub-browsing carousel and a staggered list that animate with under 40 lines of app code using animate.css and GreenSock. Covers edge cases (missing transition events, per-property event counts across browsers), the animate service API (enter/leave/move/addClass/removeClass), enable/disable and testing problems, and proposed 1.3 features for coordinated before/after hooks.

AI-written summary · about

" chapters (11)

1. 0:00Intro
2. 0:24Whats good about animations
3. 6:16What is Angular
4. 11:00What is ngAnimate
5. 18:57Entry View
6. 25:35Animate Service
7. 26:30Disable Animations
8. 27:04RequestAnimationFrame
9. 27:43TriggerReflow TriggerCallbacks
10. 28:21Asynchronous Testing
11. 29:10New Ideas

" related talks

• 26mAnimations (sequencer, web animations)Matias Niemelä · ng-europe 2014
• 26mAdvanced Angular AnimationsElad Bezalel · AngularUP 2019
• 21mDemystifying Angular AnimationGil Fink · AngularUP 2017
• 44mLively Applications with Angular AnimationsTimo Korinth · International PHP Conference Spring 2018
• 14mWhats new in ngAnimateMatias Niemelä · ng-conf 2015
• 45mImplementing Motion using AngularGerard Sans · BuzzJS 3.1 2018
• 28mAnimations, a tale of three frameworksSimona Cotin · Framework Summit 2018
• 13mBringing Angular to Life with AnimationsZachary Ng · NG-MY 2019