A deep dive into Angular's AnimationRenderer internals, specifically how it handles the setProperty and listen overrides to route animation events. Covers the distinction between transition animations (declarative, state-change-based) and timeline animations (programmatic, player-based), explaining how the @ and @@ property prefixes are used to differentiate them. Traces the call chain from AnimationRenderer through AnimationEngine down to TransitionAnimationEngine and TimelineAnimationEngine, detailing how animation triggers are fired and how phase callbacks (start/done) are registered.

9m read timeFrom playfulprogramming.com
Post cover image
Table of contents
Animations: Transition vs Timeline Copy link Link copied!AnimationRenderer overrides: entry points to animation flow Copy link Link copied!setProperty(...): fire up this thing! Copy link Link copied!listen(...): catch that animation event! Copy link Link copied!

Sort: