Animations driven by scroll in CSS

The timeline is the scroll position rather than the clock, and it costs no JavaScript.

@keyframes fade-up {
  from { opacity: 0; transform: translateY(1rem); }
  to { opacity: 1; transform: none; }
}

.reveal {
  animation: fade-up linear both;
  animation-timeline: view();
  animation-range: entry 10% cover 40%;
}

.progress-bar {
  transform-origin: left center;
  animation: grow linear both;
  animation-timeline: scroll(root block);
}

@keyframes grow { from { scale: 0 1; } to { scale: 1 1; } }

How it works

1. animation-timeline: scroll() ties progress to a scrolling ancestor.
2. view() ties it instead to the element's own trip through the viewport.
3. animation-range says which part of that trip the animation covers.

Keywords and builtins used here

• animation
• keyframes
• opacity
• rem
• reveal
• scale
• scroll
• transform
• translateY
• view

The run, in numbers

Lines

18

Characters to type

399

Tokens

100

Three-star pace

90 tpm

At the three-star pace of 90 tokens a minute, this run takes about 67 seconds.

Type this snippet

Step 6 of 8 in Motion & effects, step 16 of 21 in Responsive & modern CSS.

← Previous Next →