ADVERT

Scroll Animation Builder

Design scroll-driven reveal effects, map scroll ranges, and export modern @scroll-timeline CSS alongside IntersectionObserver fallbacks for wider browser support.

Timeline and selectors

Choose the target elements and map the scroll range to animation progress.

Target selectorScroll sourceTimeline nameAnimation nameAxis / orientationRange startRange endDurationEasingFill modeIteration count

Preview and keyframes

Adjust start and end states to visualize motion across scroll progress.

Scroll me

Progress (35%)

Start (0%)

OpacityTranslate X (px)Translate Y (px)ScaleRotate (deg)

End (100%)

OpacityTranslate X (px)Translate Y (px)ScaleRotate (deg)

IntersectionObserver fallback

Configure class toggling for browsers without `animation-timeline` support.

RootRoot marginThreshold(s)Visible classTransition durationTransition delayTransition easing

Animate once

Generated snippets

CSS scroll-linked snippet

Works in modern browsers with scroll-driven animation support.

/* CSS Scroll-linked Animation */
@supports (animation-timeline: scroll()) {
  @scroll-timeline scroll-animate {
    source: auto;
    orientation: block;
    scroll-offsets: entry 0%, cover 65%;
  }

  .animate-on-scroll {
    animation-name: reveal-on-scroll;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-timeline: scroll-animate;
    animation-range: entry 0% cover 65%;
  }

  @keyframes reveal-on-scroll {
    from {
      transform: translate3d(0px, 48px, 0) rotate(0deg) scale(0.96);
      opacity: 0;
    }
    to {
      transform: translate3d(0px, 0px, 0) rotate(0deg) scale(1);
      opacity: 1;
    }
  }
}

IntersectionObserver fallback

Use alongside the CSS snippet for broader browser compatibility.

/* IntersectionObserver Scroll Animation */
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add("is-visible");
      observer.unobserve(entry.target);
    }
  });
}, {
  root: null,
  rootMargin: "0px 0px -25%",
  threshold: 0.35,
});

document.querySelectorAll(".animate-on-scroll").forEach((el) => {
  observer.observe(el);
});

/* CSS pairing */
.animate-on-scroll {
  transform: translate3d(0px, 48px, 0) rotate(0deg) scale(0.96);
  opacity: 0;
  transition: transform 650ms cubic-bezier(0.33, 1, 0.68, 1) 0ms,
    opacity 650ms cubic-bezier(0.33, 1, 0.68, 1) 0ms;
  will-change: transform, opacity;
}

.animate-on-scroll.is-visible {
  transform: translate3d(0px, 0px, 0) rotate(0deg) scale(1);
  opacity: 1;
}

How to use this tool

Configure target selectors, scroll source, axis, and animation range settings.
Define start/end transform states and preview progress interactively.
Copy either the `@scroll-timeline` CSS snippet or IntersectionObserver fallback code.

Dual output modes

Modern scroll-linked CSS for browsers supporting `animation-timeline`.
IntersectionObserver fallback for broader compatibility.
Shared transform state controls keep both snippets aligned.

Integration tips

Use stable selectors and class names to reduce runtime surprises.
Calibrate range start/end values against real content heights.
Keep easing and duration consistent between modern and fallback snippets.

FAQ

Does this support custom scroll containers?: Yes. You can target viewport scrolling or provide container selectors for both output modes.
Can I animate only once with the fallback?: Yes. Enable the `once` option to unobserve elements after they become visible.
Are transform and opacity both configurable?: Yes. Start and end states include opacity, translate, scale, and rotate controls.

ADVERT

Timeline and selectors

Preview and keyframes

Start (0%)

End (100%)

IntersectionObserver fallback

Generated snippets

CSS scroll-linked snippet

IntersectionObserver fallback

How to use this tool

Dual output modes

Integration tips

FAQ

More like this

Timeline and selectors

Preview and keyframes

Start (0%)

End (100%)

IntersectionObserver fallback

Generated snippets

CSS scroll-linked snippet

IntersectionObserver fallback