Back

ScrollReveal

Animation Variants

Scroll down to see each animation trigger.

fade-up

Fades in while translating upward

fade-in

Simple opacity fade

fade-left

Slides in from the left

fade-right

Slides in from the right

zoom-in

Scales up while fading in

Staggered with Delay

Delay: 0ms

Delay: 150ms

Delay: 300ms

Repeat on Scroll (Once: false)

Scroll away and back — the animation re-triggers.

Repeats every time you scroll into view

Usage

@display.ScrollReveal(display.ScrollRevealProps{
    Animation: "fade-up",  // "fade-up" | "fade-in" | "fade-left" | "fade-right" | "zoom-in"
    Delay:     150,        // transition-delay in ms (default 0)
    Duration:  600,        // transition-duration in ms (default 600)
    Threshold: 0.1,        // IntersectionObserver threshold 0–1 (default 0.1)
    Once:      true,       // animate only once (default true)
}) {
    <div>Content to animate on scroll</div>
}