Free, local and no login

CSS scroll animation generator

Animate elements as the reader scrolls to them, using the browser’s own scroll timelines. No IntersectionObserver, no scroll listener, no animation library — the motion is CSS, and the browser advances it from scroll position.

Create an animation

Try it right here

A working example with the exact code it produces. Copy it, or open it in the editor and change anything.

Design it once, ship it everywhere.
Edit this animation All formats
animation.css
.body-copy {
  transform: translate3d(70px, 143px, 0);
  width: 340px;
  height: 34px;
  background: #00000000;
  color: #8b90a0;
  font-size: 18px;
  font-weight: 400;
  animation: body-copy-anim 1200ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes body-copy-anim {
  0% {
    transform: translate3d(70px, 161px, 0);
    opacity: 0;
    animation-timing-function: ease-out;
  }
  50% {
    transform: translate3d(70px, 143px, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(70px, 143px, 0);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .body-copy {
    animation: none;
    transition: none;
  }
}

Why it is built this way

Keep the distance small — 16 to 24px. Long travel makes a page feel slow to read because the eye follows the movement instead of the words. This is the entrance to reach for when you are not sure which to use.

More ready-made animations

Browse all animations →
Motion that ships

Text Reveal Animation

Headline copy wiped upward into view using a CSS mask.

Card title

Supporting copy goes here.

Card Hover Lift

A card that rises and deepens its shadow on hover. Pure CSS transition.

Zoom In Animation

A clean scale-up entrance with a slight overshoot.

What you can do

Reveal sections as they enter the viewport

Tie a progress bar or parallax to page scroll

Replace an animate-on-scroll library with native CSS

How it works

  1. 01

    Build the animation on the timeline as usual.

  2. 02

    Set the layer’s timeline to “Scroll into view” and pick the range.

  3. 03

    Export — the timeline ships behind @supports, with a load-time fallback.

Frequently asked questions

Can you do scroll animations in CSS without JavaScript?

Yes. animation-timeline lets scroll position drive a keyframe animation directly, so the effects that animate-on-scroll libraries provide need no JavaScript at all in browsers that support it.

What is animation-timeline: view()?

It maps an animation to the element’s own journey through the viewport, so the animation progresses as the element scrolls into and across the screen. animation-range then chooses which slice of that journey the animation covers.

What happens in browsers without scroll timelines?

MotionCraft emits the scroll timeline inside an @supports block and leaves a normal time-based animation in the plain rule. Browsers without support play the animation on load instead, so nothing is left invisible — which is the failure mode to avoid with a scroll-driven fade.

Does it respect reduced motion?

Yes. The generated prefers-reduced-motion guard silences scroll-driven animations along with the rest.

Open MotionCraft