animation-trigger | CSS-Methods

The CSS animation-trigger property delays the beginning of a CSS animation till a selected set off happens. Extra particularly, it listens for a named set off and controls how the animation performs or pauses in response.

.factor {
  animation: fade-in 0.35s ease-in-out each;
  animation-trigger: --trigger play-forwards play-backwards;
}

This conduct has historically been JavaScript territory, sometimes 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 essentially 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 | <trigger-name> <enter-action> [<exit-action>];

• Preliminary worth: none
• Applies to: all parts
• 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.
• <trigger-name>: The dashed ident (e.g., --fade-in-trigger) of the set off you need to hearken to. This should match a reputation outlined by the timeline-trigger or event-trigger properties.
• <animation-action>: 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:
  • <enter-action>: Dictates what occurs when the set off state turns into “lively”.
  • <exit-action> (elective): Dictates what occurs when the set off state returns to “inactive”. By default, that is none.

The “set off” in animation-trigger can consult with both timeline-based triggers, akin to scroll or view progress timelines, or event-based triggers like DOM occasions (e.g., a click on). On this entry, we’ll primarily deal with timeline triggers. In the event you’re interested by event-based triggers, you may take a look at the official spec.

By default, set off names have a world scope. If a number of parts outline the identical set off title, the factor that comes later within the cascade will get chosen. You’ll be able to limit the scope of a set off to a selected DOM subtree with the trigger-scope property.

Animation Actions

• play-forwards: Units the playback price to optimistic and performs the animation.
• play-backwards: Units the playback price to unfavorable and performs the animation in reverse.
• play: Merely performs the animation at its present price.
• play-once: Performs the animation solely from its preliminary or paused state. It ignores the set off if the animation has already completed taking part in.
• 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 <enter-action> or <exit-action> solely, which means it’s potential to play-backwards when getting into and play-forwards when exiting.

Timeline Triggers

To truly use animation-trigger, you’ll sometimes 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 <trigger-name> (like --fade-in) to hyperlink it to your animation-trigger , adopted by a <supply> timeline like a view() or scroll() operate.

timeline-trigger-name: --fade-in;
timeline-trigger-source: view();

Then, you specify the <activation-range> (akin to include) to dictate precisely when the set off turns “on” contained in the viewport.

timeline-trigger-activation-range: include;

It’s also possible to present an elective <active-range> to outline the outer boundary the place the set off stays lively earlier than turning “off”, although for those who go away 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, take a look at the timeline ranges visualizer from the Chrome group.

In the event you use totally different ranges, the lively vary should embrace the activation vary; in any other case, the set off can’t flip “on.”

When 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 an alternative:

timeline-trigger: none | <trigger-name> <supply> <activation-range> [ / <active-range>];

Not like many CSS shorthands (like background or border), the order of values issues right here, so you may’t rearrange them freely.

It’s price noting that triggers and animations don’t must be on the identical factor. You’ll be able to outline the timeline-trigger on a mum or dad and apply the animation-trigger to a number of little one parts. When the mum or dad 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:

.textual content {
  animation-trigger: --trigger play;
  animation: fade 0.6s ease-out;
}

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 exhibiting the identical setup with totally different animation actions:

With scroll-driven animations, the animation’s progress is straight 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 fairly than steady. A set off has a binary state and when a situation is met—akin to 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 reasonably 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 data can change between now and what it turns into an official Candidate Advice.

Browser Help

Simply Chrome 145+ on the time of this writing.

Additional Studying

Associated posts

Associated