Skip to tool

Scroll-Driven Animation Builder

Generate CSS scroll-driven animations.

Output will appear here…

How to Use This Tool

  1. Fill in Type, Axis, Property, From, and To. Each control is labeled; you do not need to paste a JSON blob.
  2. Click "Run" to run the tool in your browser.
  3. Read the result below the form and copy it if you need it in another app.

Learn More About Scroll-Driven Animation Builder

About Scroll-Driven Animation Builder

Generate CSS scroll-driven animations with animation-timeline: scroll() and view().

About

Generate CSS scroll-driven animations with animation-timeline: scroll() and view().
Generate CSS scroll-driven animations with animation-timeline: scroll() and view().
Runs in browser
Yes
No signup required
Yes

Examples

Scroll opacity

Scroll opacity
Input
{
  "type": "scroll",
  "axis": "block",
  "property": "opacity",
  "from": "0",
  "to": "1"
}
Output
.scroll-animated {
  animation: scroll-anim linear both;
  animation-timeline: scroll(nearest block);
}

@keyframes scroll-anim {
  from { opacity: 0; }
  to { opacity: 1; }
}

View transform

View transform
Input
{
  "type": "view",
  "axis": "inline",
  "property": "transform",
  "from": "translateY(20px)",
  "to": "translateY(0)"
}
Output
.scroll-animated {
  animation: scroll-anim linear both;
  animation-timeline: view(axis: inline);
}

@keyframes scroll-anim {
  from { transform: translateY(20px); }
  to { transform: translateY(0); }
}

Scale

Scale
Input
{
  "type": "scroll",
  "axis": "y",
  "property": "scale",
  "from": "0.8",
  "to": "1"
}
Output
.scroll-animated {
  animation: scroll-anim linear both;
  animation-timeline: scroll(root y);
}

@keyframes scroll-anim {
  from { scale: 0.8; }
  to { scale: 1; }
}

Use Cases

  • Check scroll-driven animation builder values while you draft a page, spreadsheet, or config.
  • Fill Type, Axis, Property and compare the result to a second source.
  • Keep sensitive inputs on-device — this page runs the calculation in the browser.

Frequently Asked Questions

Related Tools

Related tools: