Scroll Animations. Zero Boilerplate.
Drop-in React components and hooks powered by GSAP ScrollTrigger. Fade, slide, scale, parallax, stagger, and text reveal — all SSR-safe, fully typed, tree-shakeable.
Cinematic image expand
Scroll down to watch the image grow from a contained card to full screen, with a parallax effect on the image itself, then a content drawer that slides up from the bottom.
Animation Components
Imperative Hooks
Minified + Gzipped
Config Required
Everything you need
FadeInOnScroll
Smooth opacity transition when elements enter the viewport.
<FadeInOnScroll duration={0.8}>SlideInOnScroll
Slide from any direction — up, down, left, or right.
<SlideInOnScroll direction="left">ScaleInOnScroll
Pop elements into view with a satisfying scale animation.
<ScaleInOnScroll fromScale={0.7}>StaggerChildrenOnScroll
Cascade animations across a list or grid of children.
<StaggerChildrenOnScroll stagger={0.12}>ParallaxSection
Depth-based scrolling for backgrounds and hero elements.
<ParallaxSection speed={80}>RevealTextOnScroll
Word-by-word or character-by-character text reveal.
<RevealTextOnScroll splitBy="words">Directional Entrances
From Bottom
direction="up"
From Right
direction="left"
From Left
direction="right"
From Top
direction="down"
Scale variants
Scale 0.5 → 1
fromScale={0.5}
Bounce ease
ease="back.out(2)"
Scale down
fromScale={1.25}
Words that arrive exactly when you need them.
splitBy="words" — each word slides up and fades in sequentially.
GSAP
splitBy="chars" — each character bounces in individually.
Depth on scroll
Wrap any element with <ParallaxSection> and it moves at a different rate than the rest of the page.
I move slower than scroll
speed={90} — shifts 90 px over the element's scroll range. Use a negative value to invert the effect.
Horizontal variant
Tied to your scroll
Unlike triggered animations, scrub animations play forward and backward as you scroll — perfectly synced to your finger or wheel.
Smooth lag scrub
1.5 second lag behind scroll — silky smooth entrance.
Instant scrub
Locks 1:1 to scroll — slides in from the left.
Pin while scrolling
The card below stays fixed on screen while you scroll through it. The progress bar is driven by the onProgress callback.
Pinned Section
Keep scrolling — this card stays put. Use the pinDuration prop to control how long it sticks.
Maximum control
Need live scroll data or the raw GSAP ScrollTrigger API? These hooks give you direct access — no wrappers, no limits.
Live scroll progress
Scroll through this card to see progress update in real time.
Raw ScrollTrigger access
Full access to every ScrollTrigger option — toggleClass, snap, onToggle, custom callbacks and more. Check the browser console as you scroll this card in and out.
const { ref } = useScrollTrigger({
start: 'top 65%',
onEnter: () => console.log('entered'),
toggleClass: { targets: '.nav', className: 'scrolled' },
})When you need full control
Prefer hooks over wrapper components? Both useScrollReveal and useParallax expose a simple ref — attach it to any element.
Revealed via hook
Attach the returned ref to any DOM element for full imperative control.
const { ref } = useScrollReveal({ fromY: 60 })Floating on scroll
This card shifts vertically at a different rate as you scroll — a subtle depth effect with one line of code.
const { ref } = useParallax({ speed: 50 })