Scroll Animation Generator
Generate CSS scroll-triggered animation code with IntersectionObserver
1 credit
Preset
Lift + fade — the most common hero reveal
700ms
120ms
Delay between sibling reveals.
Hint: Scroll inside the preview — cards fade/slide/rotate based on the active preset.
Live Scrollable PreviewScroll inside this frame ↓
preview.html
Generated code
/* CSS */
.reveal {
opacity: 0; transform: translateY(40px);
transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1), opacity 700ms ease, filter 700ms ease;
will-change: transform, opacity, filter;
}
.reveal.in {
opacity: 1; transform: translateY(0);
}
/* JavaScript */
const items = document.querySelectorAll(".reveal");
items.forEach((el, i) => { el.style.transitionDelay = (i * 120) + "ms"; });
const io = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add("in");
io.unobserve(entry.target);
}
});
}, { threshold: 0.15 });
items.forEach((el) => io.observe(el));
/* HTML */
<div class="reveal">Section 1</div>
<div class="reveal">Section 2</div>
<div class="reveal">Section 3</div>