The CSS animation-trigger property delays the beginning of a CSS animation till a particular set off happens. Extra particularly, it listens for a named set off and controls how the animation performs or pauses in response.
This conduct has historically been JavaScript territory, usually with the Intersection Observer API.
Scroll-triggered animations shouldn’t be confused with scroll-driven animations. Though each depend on scroll or view timelines, they’re basically totally different ideas. We’ll get to these variations in a minute.
The animation-trigger property is outlined within the Animation Triggers specification
Syntax
animation-trigger: none | [];
Preliminary worth:none
Applies to: all components
Inherited: no
Computed worth: as specified
Animation kind: not animatable
Values
The property accepts none, or a comma-separated checklist of triggers and their corresponding actions:
none: The default state. The animation behaves usually and isn’t a triggered animation.
: The dashed ident (e.g., --fade-in-trigger) of the set off you need to take heed to. This should match a reputation outlined by the timeline-trigger or event-trigger properties.
: A number of key phrases dictating what the animation ought to do when the set off prompts (and optionally, when it deactivates). This may be additional divided into:
: Dictates what occurs when the set off state turns into “lively”.
(non-obligatory): Dictates what occurs when the set off state returns to “inactive”. By default, that is none.
The “set off” in animation-trigger can discuss with both timeline-based triggers, resembling scroll or view progress timelines, or event-based triggers like DOM occasions (e.g., a click on). On this entry, we’ll primarily concentrate on timeline triggers. When you’re interested by event-based triggers, you may try the official spec.
By default, set off names have a international scope. If a number of components outline the identical set off title, the factor that comes later within the cascade will get chosen. You may limit the scope of a set off to a particular DOM subtree with the trigger-scope property.
Animation Actions
play-forwards: Units the playback charge to optimistic and performs the animation.
play-backwards: Units the playback charge to adverse and performs the animation in reverse.
play: Merely performs the animation at its present charge.
play-once: Performs the animation solely from its preliminary or paused state. It ignores the set off if the animation has already completed enjoying.
pause: Freezes the animation in place.
reset: Immediately units the animation progress again to 0 and pauses it.
replay: Units the progress again to 0 and instantly performs it.
none: Does nothing.
Some actions aren’t or solely, which means it’s doable to play-backwards when getting into and play-forwards when exiting.
Timeline Triggers
To truly use animation-trigger, you’ll usually must arrange a timeline set off first. That controls when an animation begins primarily based on the place a component is inside a timeline (like scroll or viewport place). Extra particularly, it prompts when the factor enters an outlined activation vary inside that timeline.
To arrange your timeline set off, you’ll first outline a customized (like --fade-in) to hyperlink it to your animation-trigger , adopted by a timeline like a view() or scroll() operate.
Then, you specify the (resembling include) to dictate precisely when the set off turns “on” contained in the viewport.
timeline-trigger-activation-range: include;
You can too present an non-obligatory to outline the outer boundary the place the set off stays lively earlier than turning “off”, although for those who depart it out, the browser simply defaults to your activation vary.
timeline-trigger-active-range: cowl;
To get a greater really feel for the way this works, try the timeline ranges visualizer from the Chrome staff.
When you use totally different ranges, the lively vary should embrace the activation vary; in any other case, the set off can’t flip “on.”
Whilst you can use all the person longhand properties:
timeline-trigger-name
timeline-trigger-source
timeline-trigger-activation-range
timeline-trigger-active-range
…you’ll virtually at all times need to use the shorthand as a substitute:
timeline-trigger: none | [ / ];
In contrast to many CSS shorthands (like background or border), the order of values issues right here, so you may’t rearrange them freely.
It’s value noting that triggers and animations don’t need to be on the identical factor. You may outline the timeline-trigger on a dad or mum and apply the animation-trigger to a number of little one components. When the dad or mum enters view, all youngsters can animate collectively.
Utilizing triggers
Let’s create a easy textual content reveal animation. We’ll use a component because the set off level. When you scroll previous it, the animation performs and the textual content fades in.
First, outline a timeline set off on the set off factor:
.set off {
timeline-trigger: --trigger scroll() include / cowl;
}
This units up a set off named --trigger that prompts primarily based on scroll place. The vary include / cowl means the animation is triggered when the factor is totally seen within the scrollport (include) and continues to run so long as any a part of it stays seen within the scrollport (cowl).
Subsequent, we’ll apply the animation-trigger to the textual content you need to animate, together with the animation itself:
The cool half is which you could combine and match totally different animation-action values to get very totally different behaviors utilizing the identical set off. Right here’s a fast demo displaying the identical setup with totally different animation actions:
With scroll-driven animations, the animation’s progress is immediately tied to scroll place. As you scroll, the animation scrubs ahead or backward in sync with the timeline. There’s no idea of a “begin” or “fireplace” second.
In distinction, scroll-triggered animations are state-based quite than steady. A set off has a binary state and when a situation is met—resembling a component getting into an outlined vary—the set off fires an related motion (like play, pause, or reset). As soon as triggered, the animation behaves like your common CSS animations with no hyperlink to the scroll progress.
Right here’s a fairly cool demo to see the variations between the 2, courtesy of utlitybend:
Specification
The animation-trigger property is outlined within the Animation Triggers specification, which is presently in Editor’s Drafts. Which means the knowledge can change between now and what it turns into an official Candidate Suggestion.
