Animate on Scroll — Demo

This page shows two ways to trigger animations: via anim-in/anim-out (JS) or via anim-view (scroll-driven CSS). Pick one or the other: anim-in entrances are not compatible with anim-view. With anim-view, the duration and delay parameters have no effect since progress is fully synchronized to the scroll percentage.

Available triggers and effects

There are 3 triggers: in (entrance), out (exit), and scroll (anim-view). Each trigger can use the following effects: fade, scale, slide. You can combine several effects, for example anim-fade + anim-slide-from-bottom + anim-scale.

Trigger: in

Starts when entering the viewport.

anim-fadeanim-slide-from-bottomanim-duration-500

Trigger: out

Plays when leaving the viewport.

anim-fade-outanim-slide-out-from-topanim-duration-500

Trigger: scroll (anim-view)

Synchronized to scrolling, without duration or delay.

anim-fade-scrollanim-slide-scroll-from-bottomanim-scroll

Available effects:

fade — opacity via anim-fade (+ option anim-fade-50...).
scale — zoom via anim-scale, or per axis anim-scale-x-*/anim-scale-y-*.
slide — movement via anim-slide-from-* with distances (anim-slide-8, anim-slide-full...).

Basic examples (JS — anim-in)

Basic JS-side variants: fade-in, anim-slide-from-top/bottom/left/right, scale-in and scale-out.

Fade

Gradual appearance.

anim-fade-inanim-fadeanim-fade-50

Fade Up

Slides up.

anim-fadeanim-slide-from-bottomanim-duration-700

Fade Down

Slides down.

anim-fadeanim-slide-leftanim-slide-fullanim-duration-700

Fade Left

Slides in from the left.

anim-in-fadeanim-slide-from-leftanim-duration-700

Fade Right

Slides in from the right.

anim-fadeanim-slide-from-rightanim-duration-700

scale In

Slight scale in.

anim-scale-inanim-duration-700

scale Out

Slight scale out.

anim-scale-outanim-duration-700sm:col-span-2lg:col-span-1

Scroll‑Driven (anim-view)

These elements use anim-view and a scroll-driven CSS timeline. They are synchronized to scrolling: no duration or delay (those values are ignored).

Scroll — Fade

Progress tied to scrolling.

anim-slide-scroll-from-bottom-rightanim-scale-scrollanim-scale-150anim-fadeanim-duration-[2s]anim-slide-fullanim-scrollw-fitstickybottom-0anim-scroll-end-cover-3/4

Durations & easing (JS — anim-in)

Control speed and interpolation with the utilities: anim-duration-*, anim-ease-*, anim-delay-*.

Fast (300ms, linear)

Ideal for micro-transitions.

anim-fadeanim-slide-from-bottomanim-duration-300anim-ease-linear

Standard (700ms, ease-out)

Soft curve toward the end.

anim-fadeanim-slide-from-bottomanim-duration-700anim-ease-out

Slow (1200ms)

Emphasizes the feeling of smoothness.

anim-fadeanim-slide-from-bottomanim-duration-[1200ms]anim-ease-out

Delay 150ms

Defer the entrance to set a rhythm.

anim-fadeanim-slide-from-rightanim-duration-700anim-delay-150

Delay 300ms

Use staggered offsets.

anim-fadeanim-slide-from-rightanim-duration-700anim-delay-300

Delay 500ms

For a more pronounced choreography.

anim-fadeanim-slide-from-rightanim-duration-700anim-delay-500

Cascading lists (JS — anim-in)

Apply increasing delays to simulate a cascade effect.

Item 1

anim-delay-0

anim-fadeanim-slide-from-bottomanim-duration-700

Item 2

anim-delay-150

anim-fadeanim-slide-from-bottomanim-duration-700anim-delay-150

Item 3

anim-delay-300

anim-fadeanim-slide-from-bottomanim-duration-700anim-delay-300

Item 4

anim-delay-500

anim-fadeanim-slide-from-bottomanim-duration-700anim-delay-500

Item 5

anim-delay-700ms

anim-fadeanim-slide-from-bottomanim-duration-700anim-delay-[700ms]

Item 6

anim-delay-900ms

anim-fadeanim-slide-from-bottomanim-duration-700anim-delay-[900ms]

Visual parameters — examples

Each effect accepts parameters. Here are concrete previews to tune them visually.

Scale 125%

anim-scale-125

anim-scaleanim-scale-125anim-duration-700

Scale X 150%

anim-scale-x-150

anim-scaleanim-scale-x-150anim-duration-700

Scale Y 90%

anim-scale-y-90

anim-scaleanim-scale-y-90anim-duration-700

Fade 50%

anim-fade-50

anim-fadeanim-fade-50anim-duration-700

Slide 2rem

anim-slide-from-left anim-slide-8

anim-slide-from-leftanim-slide-8anim-duration-700

Slide full

anim-slide-from-right anim-slide-full

anim-slide-from-rightanim-slide-fullanim-duration-700

Tip: combine several effects. Example: anim-fade + anim-slide-from-bottom + anim-scale-105.

Combinations (JS — anim-in)

Combine the variants for richer staging.

Block A

Title in fade-down

Slower fade-up content, with a slight delay. Ideal for telling a story while scrolling.

fade-left

fade-right

scale-out

scale-in

JS entrances (without anim-view)

These elements do not use anim-view. They are triggered in JavaScript via IntersectionObserver by the AnimateOnScroll component and start when they enter the viewport.

JS — Fade Up

Without anim-view, triggered on entrance.

anim-fade-50anim-slide-from-bottomanim-duration-700p-6

JS — Fade Left

Purely via the JS observer.

anim-fadeanim-slide-from-leftanim-duration-700p-6

JS — scale In

No CSS timeline; JS trigger.

anim-scale-inanim-duration-700p-6

JS exits (anim-out)

These elements use anim-out. They play their animation when you leave their viewing area (by scrolling them out of the viewport). Scroll slowly to see the effect.

JS — Exit downward

Plays when the card leaves the screen.

JS — Exit upward

Plays when scrolling back up, as the card leaves the viewport.

JS — Scale Out

Scale-out exit effect.