Did you know scroll-triggered animations are available in Chromium browsers? Because I sure didn't, until Bramus van Damme pointed it out under Kevin Powells post.

After Kevin Powell shared one of his recent videos on Bluesky showing a hack to use scroll*-driven* animations to create a scroll*-triggered* animation, I enthusiastically replied "Very cool! Feels like scroll triggered animations are taking forever. [...]", to which Bramus van Damme replied:

https://bsky.app/profile/bram.us/post/3mu2ziezmns2y

That was slightly awkward, since animation with CSS has kind of been my thing for the past few years. But if you missed it too, don't feel too bad. The feature is currently not even on MDN yet and hasn't been widely promoted.

Triggered animations

Triggered animations are CSS animations that respond to a trigger being either active or inactive. We can specify animation actions and use it, for example, to play, pause or reverse animations based on if the trigger is active or not.

Scroll position is the first available trigger that's been added to browsers, but there are plans to add action-triggers like pointerdown and pointerup.

The difference between modern CSS animation options

Let's quickly go over the difference between regular-, scroll-driven- and scroll-triggered CSS animations.

• Regular animations are triggered immediately (or after a time delay), and a time duration determines the progress of the animation.
• Scroll-driven animations animate between two points on the page based on the user's scroll position, the triggering element's position determines the start, end and progress of the animation.
• Scroll-triggered animations are animations that are triggered by the active range of the trigger element. While they are triggered they run on a regular, time-based animation timeline, but they can be interrupted by leaving the active range as well.

Usage

Scroll animations in general have a lot of haters. Some of that criticism is justified, and some is not really (imho), as long as you respect user preferences.

A good way to respect users' preferences is to wrap your animations in a prefers-reduced-motion media query:

.element {
  @media (prefers-reduced-motion: no-preference) {
		animation: bounce 0.3s ease-out;
  }
}

CSS

When to reach for scroll-driven animations

Scroll-driven animations are great when you want the scroll position to determine the progress of the animations, Parallax animations and scroll progress indicators are good examples.

Scroll-driven animations run for as long as you scroll, which means the animation needs to keep looking 'good' throughout the entire timeline. A user can stop scrolling at any time, so you need to make sure there aren't any awkward in-between keyframes.