Scroll-Driven Animations Generator
Design CSS scroll-driven animations with a live preview, scroll() and view() timeline support, axis and range controls, keyframe presets, and copyable CSS output.
Scroll inside the preview box to see the animations trigger.
view() — animation driven by the element's visibility in the scrollport. scroll() — animation driven by the scroll position of a container.
Each stop defines the element state at that scroll progress fraction (0 = start, 1 = end). Translate in px, rotate in degrees, scale 1 = original, opacity 0–1.
About this tool
CSS scroll-driven animations let you link animation progress directly to scroll position, eliminating the need for JavaScript IntersectionObserver hacks. Two timeline types are available:
scroll()— the animation progress tracks the scroll offset of a scroll container. The entire scroll range maps to 0%–100% of the animation.view()— the animation fires as the element enters and exits the scrollport. Combined withanimation-range, you control exactly when the effect starts and ends (e.g.entry 0%tocover 100%).
Example: the fade-slide-up preset with view() and range cover 0% cover 100% makes elements fade in and slide up as they scroll into view. Use the live preview above to scroll through demo cards and see the effect in action.
FAQ
Which browsers support scroll-driven animations? ›
Chrome 115+, Edge 115+, Opera 101+, and Samsung Internet 23+ support both scroll() and view() timelines. Firefox and Safari are actively implementing support (tracked under the "Scroll-driven Animations" spec).
What is the difference between scroll() and view()? ›
scroll() links the animation to the scroll position of a container — the animation plays as you scroll through the container. view() links the animation to the element's own visibility within the scrollport — the animation plays only while the element is entering/leaving the visible area.
What does animation-range do? ›
animation-range controls which portion of the scroll/view timeline is mapped to the animation. For view(), common ranges are "entry" (entering viewport), "exit" (leaving), "cover" (full visibility span), and "contain" (fully contained). You can also specify percentages like "entry 20% cover 80%".
Can I combine scroll-driven animations with regular time-based animations? ›
Yes. An element can have multiple animations — some scroll-driven and some time-based — as long as they use different animation-timeline values. This is useful for adding a hover effect to an element that also has a scroll-reveal animation.
How is this different from the CSS Animation Generator? ›
Scroll-Driven Animations Generator creates animations linked to scroll position using scroll() and view() timelines — they play as the user scrolls. The <a href="/css-animation">CSS Animation Generator</a> creates time-based keyframe animations that play automatically or on a trigger with configurable duration, delay, and iteration count. Use this tool when you want motion tied to scroll progress; use the CSS Animation Generator when you want an animation that runs on a clock.