Scroll Animate

utilities

Wrapper that triggers entrance animations when elements scroll into view.

Preview

No preview available

Check the code examples below.

Installation

npm install @launchapp/design-system
Import
import { ScrollAnimate } from "@launchapp/design-system";

Examples

Fade-up on scroll

<ScrollAnimate animation="fade-up">  <div className="p-6 rounded-xl bg-muted">    <h2 className="text-xl font-bold">Animated section</h2>    <p className="mt-2 text-muted-foreground">Appears as you scroll down.</p>  </div></ScrollAnimate>

Props

PropTypeDefaultDescription
children*
React.ReactNode—Content to animate on scroll.
animation
"fade-up" | "fade-in" | "slide-left" | "slide-right""fade-up"Animation type.
delay
number0Animation delay in milliseconds.
← PreviousSankey Diagram
Next →Scroll Effects