Scroll Reveal
Reveal content with smooth animations as users scroll through your page. Built with Framer Motion for performance and flexibility.
Pro features
What the Pro version adds to this component.
7 Animation Types
Fade, slide, zoom, flip, bounce, rotate and blur — a distinct entrance for every section, selected via the animation prop
Cascade & Stagger
Reveal the direct children of a single wrapper in sequence with cascade or stagger, each with its own millisecond delay
Parallax Scrolling
Bind an element's vertical offset to scroll position with a configurable parallaxSpeed for a sense of depth
Responsive & Lifecycle
Toggle animations per breakpoint with mobile/desktop and hook into onReveal / onComplete callbacks
Installation
Install via CLI
npx @moontra/moonui-cli add scroll-revealUsage
Basic Usage
Slide Up Animation
This content slides up when it enters the viewport
Slide Left Animation
This content slides from the left with a delay
Slide Right Animation
This content slides from the right with more delay
Final Animation
Last element to appear for better scroll experience
Pro Usage
Examples
SaaS Platform Hero with Trust Indicators
Enterprise-grade landing hero with company logos and social proof
Feature Grid Showcase
Professional feature presentation with staggered animations
Tech Stack Showcase with Gradient Animations
Professional technology grid with hover effects and gradient backgrounds
Statistics Dashboard with Animated Counters
Professional metrics display with number animations and progress indicators
Seven Animation Types
Pro ScrollReveal ships seven distinct entrance animations — fade, slide, zoom, flip, bounce, rotate and blur — chosen per element via the animation prop. Durations and delays are in milliseconds (the free component uses seconds).
Cascade Children in One Wrapper
Enable cascade with cascadeDelay to reveal the direct children of a single ScrollReveal one after another — no separate container/item components needed. cascadeDelay is in milliseconds.
Parallax Scrolling Depth
Turn on parallax with parallaxSpeed to bind an element's vertical offset to scroll position, creating a sense of depth. Parallax is exclusive to the Pro component.
Staggered Grid
Use stagger with staggerDelay to offset each child's entrance inside a single ScrollReveal — perfect for card grids. staggerDelay is in milliseconds.
Per-Breakpoint Control (mobile / desktop)
Turn the animation off for one breakpoint class without branching your JSX. `mobile={false}` skips the animation on viewports ≤ 768px, `desktop={false}` skips it above that — in both cases the content still renders, fully visible and unanimated, so nothing is ever hidden from a user or a crawler. Use it to keep motion off small screens (where entrance animations compete with scrolling) while keeping it on the desktop hero.