An empty cinema auditorium facing a blank screen

Scroll animations in plain CSS

Now showing in your stylesheet

One attribute per element. No JavaScript, so there is nothing to load, block or break.

<h2 data-dolly="tilt-up"> $npm i @dollyjs/core

or one file: cdn.jsdelivr.net/npm/@dollyjs/core@0/src/dolly.min.css

Starring: 34 moves, 13 exits
Directed by: Your browser
JavaScript: None
Showing in: Chrome 115 · Safari 26 · Firefox 159

Take a seat.
Add one attribute.

Put data-dolly on an element you already have and name a camera move. That is the whole integration: no wrapper, no provider, no init call. The title card you scrolled past left with data-dolly-exit.

<link rel="stylesheet"
      href="dolly.css">

<h2 data-dolly="crane">
  Enter the hero
</h2>

Enter the hero

Now showing.

Each move is named for what a camera does. If you know the film term, you can guess the attribute.

A full cinema audience — `tilt-up` rises into place

Red seats either side of a lit aisle — `dolly-in` pushes in toward it

Rows of red seats under a ceiling of lights — `pan-left` travels in from the right

Film reels on a projector — `crane` lifts and settles

Red-striped boxes of popcorn — `roll` rotates level

All 34 moves and 13 exits, playing as you scroll

If the projector breaks.

Most scroll libraries set opacity: 0 on your content and wait for JavaScript to bring it back. When the script fails, so does the page. Dolly keeps the hidden state inside the animation, so a browser that can’t run it, or a reader who turned motion off, gets the page exactly as you wrote it.

A slide projector throwing a beam of light — With scroll timelines: `dolly-in`.

Running time.

0 kBof JavaScript in Dolly

4.7 kBof JavaScript in AOS

This table wiped in with reveal. Sizes are minified and gzipped. Dolly is 2.7 kB of CSS; AOS 2.3.4 adds 2.2 kB of CSS to its JavaScript.

Tickets.

One install. Then delete whichever scroll library you were using.

$npm i @dollyjs/core