Presets

Timeline Type

Animates based on scroll position of a scrollable container

Scroll Timeline Options

Scroll Axis

Scroll Source

Use Named Timeline

Animation Keyframes

Keyframe Preset

Animation Properties

Animation Range

Timing Function

Fill Mode

Options

Include Fallback for Unsupported Browsers

Save/Load

Interactive Preview

Scroll inside the box to see the animation

Animated Element

Note: This is a simulated preview. Actual scroll-driven animations require browser support.

Generated CSS

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animated-element {
  animation-name: fadeIn;
  animation-timeline: scroll(nearest block);
  animation-timing-function: ease;
  animation-fill-mode: both;
}

/* Fallback for browsers without scroll-driven animations support */
@supports not (animation-timeline: scroll()) {
  .animated-element {
    animation: fadeIn 1s ease both;
  }
}

HTML Structure

<div class="animated-element">
  Animated content on scroll
</div>

Scroll Timeline Reference

scroll() Function

scroll() - Nearest scroller, block axis
scroll(root) - Document scroller
scroll(nearest inline) - Horizontal scroll
scroll(self) - Element itself

view() Function

view() - Default view timeline
view(block) - Vertical visibility
view(inline) - Horizontal visibility
Animates as element enters/exits viewport

Animation Range

normal - Full timeline range
cover - Element covers scrollport
contain - Fully contained in scrollport
entry/exit - Entering/leaving phase

Browser Support

Chrome 115+: Full support
Edge 115+: Full support
Firefox: Behind flag
Safari: Not yet supported

Use Cases

Progress Indicators

Reading progress bars that fill as user scrolls

Reveal Animations

Elements fade/slide in as they enter viewport

Parallax Effects

Background elements moving at different speeds

Sticky Headers

Header animations based on scroll position