CSS animation-trigger Property Controls Animations
Explore the new CSS animation-trigger property from the Animation Triggers spec, enabling scroll-based triggers. Currently supported in Chrome 145+.
Stock photo for illustration only, not from the actual event
- animation-trigger delays animations until a specific trigger occurs
- Unlike scroll-driven animations, it operates on a binary state
- Trigger names have global scope and can be scoped via trigger-scope
- Browser support is currently available in Chrome version 145 and above
The CSS animation-trigger property delays the start of a CSS animation until a specific trigger occurs, listening for a named trigger to control playback. This property is defined within the Animation Triggers specification, which is currently in Editor's Drafts, meaning details might change before it reaches official Candidate Recommendation status.
By default, trigger names operate with a global scope. If multiple elements share the same trigger name, the element appearing later in the cascade takes precedence. Developers can restrict this scope to a specific DOM subtree using the trigger-scope property.
Understanding the distinction between scroll-triggered and scroll-driven animations is crucial. Scroll-triggered animations are state-based rather than continuous; once a binary condition is met, such as entering a defined range, the trigger fires an action like play, pause, or reset, after which the animation runs independently of scroll progress.
To utilize animation-trigger effectively, developers typically set up a timeline trigger first to control animation initiation based on an element's position within a timeline, activating when it enters a designated range. Importantly, triggers and animations do not need to reside on the same element; a timeline-trigger on a parent element can orchestrate animation-trigger effects across multiple child elements simultaneously.
Stock photo for illustration only, not from the actual event
A simple text reveal animation can be created by setting a timeline trigger point on an element. Once scrolled past, the animation executes and fades the text in by applying the timeline trigger to the trigger element and pairing animation-trigger with the target text element.
Regarding browser compatibility at the time of writing, the animation-trigger property is supported exclusively in Google Chrome version 145 and newer. Developers can dive deeper into related documentation provided by Chrome for developers and community articles.
Source: CSS-Tricks
Found something wrong in this article? Report an issue with this article
Comments
Leave a Comment