Scroll-driven Animations for Tailwind CSS

Unofficial and experimental plugin for Tailwind CSS v4+ that provides utilities for scroll-driven animations.

unofficial experimental

Installation

Install the plugin from npm:

npm install @adam.plesnik/tailwindcss-scroll-driven-animations

Then register the plugin in your main CSS file with the @plugin directive:

@import 'tailwindcss';
@plugin '@adam.plesnik/tailwindcss-scroll-driven-animations';

Tailwind CSS v3

Tailwind CSS v3.4+ is supported by the v0.3.x releases of this plugin. Install that version:

npm install @adam.plesnik/[email protected]

Then add the plugin to your tailwind.config.js:

module.exports = {
  plugins: [
    require('@adam.plesnik/tailwindcss-scroll-driven-animations'),
    // ...
  ],
}

Usage

The plugin provides utilities for a subset of CSS scroll-driven animation properties.

• animation-timeline
• animation-range
• scroll-timeline, view-timeline
• timeline-scope

Animation Timeline

The single most impressive feature of scroll-driven animations is an anonymous animation timeline. It allows user to easily trigger anything just by scrolling the page. The plugin allows user to use the .timeline CSS class which defaults to animation-timeline: scroll(y) and also provides an option to set custom timeline name with a modifier.

Scroll and View Timeline

Scroll and View timelines provide user with better control over the animations. Both .scroll-timeline and .view-timeline are meant to be used with modifiers to set the timeline name.

Range

Animation range controls start and end of an animation. Utility class .range offers various options along with a possibility to use length modifiers.

Scope

Timeline scope allows to control animated elements outside the parent which defines the timeline. Utility .scope should be used with a modifier to define the timeline name set by .scroll-timeline or .view-timeline.

Browser Support

Scroll-driven animations are supported as of May 2026, but should be used with caution. Use the no-animations:... variant for fallback styling.