Free · Private · No signup
Scroll Animation Generator
Generate scroll-triggered animations — reveals, sticky type, parallax, stacked cards — then copy CSS, JS, HTML, or an AI prompt. Runs in your browser.
Preset
Reveals enter on view. Scenes pin, stack, or track scroll.
Export
Intersection Observer adds .is-inview. Reduced-motion rules are in the CSS.
/* Scroll reveal — Intersection Observer adds .is-inview when the element enters the viewport.
Pair with the JavaScript snippet. Respects prefers-reduced-motion. */
@keyframes jn-scroll-fadeUp {
from {
opacity: 0;
transform: translateY(2.5rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.jn-scroll {
opacity: 0;
}
.jn-scroll.is-inview {
animation: jn-scroll-fadeUp 0.6s ease-out 0s both;
}
@media (prefers-reduced-motion: reduce) {
.jn-scroll,
.jn-scroll.is-inview {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
}Scroll reveals you can paste, not a motion library
Most “animate on scroll” tools lock you into React or a 30kb package. Reveals write CSS @keyframes plus Intersection Observer. Scenes pin headlines, pan galleries, stack cards, draw paths, or count up — copy HTML/CSS (and JS only if needed), or an AI prompt. For keyframes that are not tied to scroll, use the CSS Animation Builder. For the CSS-only animation-timeline: view() path, see the Pure CSS scroll animations guide.
A real scroll window with a URL bar and a visible scrollbar — not a static box.
One export panel, one copy button, plus a Cursor/Claude prompt for that preset.
Fade, slide, and stagger — plus parallax, stacked cards, path draw, count-up, and more.
100% client-side. Animation settings never leave this tab.
How to use the scroll animation generator
- 1
Pick a preset
Switch Reveals or Scenes, then choose a chip. Each chip has a tiny motion hint.
- 2
Scroll the preview
Use the mini-browser. Jump to demo scrolls inside that window. Replay resets to the top.
- 3
Tune reveals if you need to
Duration, delay, easing, and threshold sit under the reveal chips. Scenes play from scroll.
- 4
Copy the active tab
CSS, JS, HTML, or an AI prompt — one primary Copy button.
Frequently asked questions
How does this scroll animation generator work?
Pick a reveal (fade, slide, scale, stagger) or a scene (sticky headline, parallax, stacked cards, and more). Reveals write CSS @keyframes plus Intersection Observer. Scenes write a pinned or scroll-linked section — HTML and CSS, plus JS only when needed.
What is the AI prompt for?
The AI prompt tab is a self-contained brief for that exact preset: behavior, HTML, CSS, and JS. Paste it into Cursor or Claude. No Jaconir branding — restyle copy and colors to your project.
What kinds of scenes are included?
Sticky headline, scale then scroll, parallax layers, horizontal gallery, stacked cards, clip-path reveal, split text, progress bar, SVG path draw, number count-up, and Ken Burns image zoom. Each has a live preview and copy-paste output.
Why Intersection Observer instead of animation-timeline: view()?
Reveals use Intersection Observer so they work in every modern browser, including Safari. Scenes use sticky positioning and scroll-linked CSS variables. The AI prompt allows animation-timeline if you keep a fallback.
How do I add the CSS and JavaScript to my site?
Copy HTML into the page, CSS into your stylesheet, and JS before </body> when the snippet is not a “CSS only” comment. Or paste the AI prompt into an agent.
Does this respect prefers-reduced-motion?
Yes. Generated CSS includes a reduced-motion media query. Reveal scripts skip the observer and show the final state. Scene scripts skip scroll-linking so the layout stays readable.
Does this tool upload my code?
No. Presets, preview, and export run in your browser. Nothing is sent to a server, and there is no account.
Related tools & guides
CSS Animation Builder
Build @keyframes that are not tied to scroll — hover, load, and loops.
CSS Gradient Generator
Backgrounds to sit under the sections you reveal on scroll.
CSS scroll animation guide
Keyframes, Intersection Observer, and when to use each.
Pure CSS scroll animations
animation-timeline: view() — the CSS-only path, with fallbacks.