ScrollReveal

Scroll-triggered animations that reveal content as the user scrolls down the page. It supports a stagger mode for card grids where child elements animate one‑by‑one and uses IntersectionObserver for performance.

Use Cases

• Card grids with staggered entrance (most common – use stagger=true)
• Feature sections with cards appearing sequentially
• Testimonial cards appearing one by one
• Timeline sections revealing progressively
• Photo galleries with staggered reveals
• Stats/metrics appearing in sequence

Properties

animation

Type: string. Options: fadeIn, slideInUp, slideInLeft, slideInRight, scaleIn. Default: fadeIn. Type of reveal animation.

Tip: Recommendations – subtle: fadeIn (weddings, professional); vertical: slideInUp (most common, natural); sideBySide: slideInLeft or slideInRight (hero layouts); dynamic: scaleIn (celebrations, bold statements).

duration

Type: number. Default: 0.8. Animation duration in seconds. 0.6‑1s is modern and subtle.

delay

Type: number. Default: 0. Delay before animation starts (in seconds). Usually 0 when using stagger.

easing

Type: string. Options: smooth, swift, bouncy, elastic, ease-out, ease-in-out, ease, ease-in. Default: smooth. Animation easing curve. Use ‘smooth’ (Stripe‑style) for professional sites.

Tip: Recommendations – professional: smooth (Stripe’s signature curve – default, use most of the time); modern: swift (Material Design – quick and responsive); playful: bouncy (fun overshoot effect – kids/games only); attention: elastic (dramatic – use sparingly).

threshold

Type: number. Default: 0.3. Trigger when % of element is visible (0‑1). 0.3 = reveals when 30% visible (good default).

triggerOnce

Type: boolean. Default: true. Trigger once (true) or repeat on scroll out/in (false). Usually true for cleaner UX.

stagger

Type: boolean. Default: false. Enable staggered reveal for child elements. When true, children animate one‑by‑one instead of all at once. HIGHLY RECOMMENDED for card grids.

staggerDelay

Type: number. Default: 0.1. Delay between each child animation in seconds. 0.1s is subtle, 0.15s is more dramatic.

staggerDirection

Type: string. Options: forward, reverse, center. Default: forward. Order of stagger animation. forward=first‑to‑last, reverse=last‑to‑first, center=middle‑outward.

Best Practices

• REQUIRED: Every landing/home page MUST have at least 2‑3 ScrollReveal sections
• For card grids: Use stagger=true instead of manually setting delays on each card
• Use easing='smooth' (Stripe‑style) for professional feel – this is the default
• Use easing='bouncy' for playful/fun sites only
• Pair with duration 0.6‑1s for modern, subtle feel (fast feels janky)
• Use slideInUp for vertical content (most common and natural)
• Use fadeIn for subtle, elegant reveals (weddings, professional)
• Set threshold=0.3 (reveals when 30% visible – good default)
• Set triggerOnce=true for single reveal (triggerOnce=false for repeat on scroll)
• Good for: Hero images, testimonials, timeline items, gallery images, feature cards
• Avoid: Form inputs, buttons, navigation, headers, footers
• NEVER skip animations entirely – sites without motion feel static and lifeless

Common Mistakes

Wrapping each card in separate ScrollReveal with manual delays

Why it's a problem: Verbose and error‑prone – stagger mode does this automatically

Fix: Wrap the Grid in ONE ScrollReveal with stagger=true, staggerDelay=0.1

Using ScrollReveal on every element

Why it's a problem: Overuse makes pages feel gimmicky and annoying – reduces impact

Fix: Use on 3‑5 key sections maximum per page (hero, testimonials, timeline, gallery)

Using fast duration (< 0.5s)

Why it's a problem: Fast animations feel janky and cheap

Fix: Use 0.6‑1s for modern, subtle feel

Using ScrollReveal on navigation, headers, forms

Why it's a problem: Users expect instant access to navigation and forms – delays frustrate

Fix: ONLY use on content sections (stories, timelines, galleries, testimonials)

Using default easing='ease' instead of 'smooth'

Why it's a problem: Default CSS easing feels generic and unpolished

Fix: Use easing='smooth' for Stripe‑quality animations