Motion Reveal

A small system for revealing content as it scrolls into view — one element at a time, staggered as a group, or independently across a page's sections.

Three components cover most cases:

  • MotionReveal — animates a single element in as it scrolls into view.
  • MotionRevealGroup — wraps a set of MotionReveals and triggers them together as one staggered sequence.
  • MotionRevealIndividual — wraps a set of children and reveals each one independently, with no shared trigger or stagger.

A few conceptual notes before diving in:

  • Defaults are global, per-animation, and overridable. Each animation has its own default offset/duration/ease in motionRevealDefaults, shared with the raw Framer variants — pass offset/duration on any instance to override just that value.
  • Exactly one thing owns the viewport trigger. Inside a MotionRevealGroup, individual MotionReveals automatically defer their trigger to the group (via context, no prop needed) — which is why amount/repeat/margin go inert on a grouped MotionReveal.
  • One shared prop vocabulary, not three APIs. MotionRevealGroup and MotionRevealIndividual forward straight to MotionReveal's props instead of reinventing their own — learn MotionReveal once and you know all three.
  • margin needs scroll room to work. Shrinking the trigger zone only helps if there's enough page content below the target to actually scroll it into that zone — an element near the bottom of the page (especially the last one) may never satisfy a large margin and simply never reveal.

MotionReveal

Animates a single element in — fading, sliding, or scaling — once it scrolls into view. Built on Framer Motion's variants API.

Pick an animation
Trigger margin
A placeholder image

Card

Card description

import { MotionReveal } from '@/animations';
import { Card } from '@/ui/components/card';
 
<MotionReveal animation="fade-up">
  <Card title="Card 1" description="Card description" media={image} />
</MotionReveal>;

Default Animation Values

Default offset/duration/ease per animation, defined once in motionRevealDefaults and shared with the raw Framer variants (fadeUp, zoomIn, etc):

animationoffsetdurationease
fade-up24px500msstandard (ease-out)
fade-down24px500msstandard (ease-out)
fade-left24px400msstandard (ease-out)
fade-right24px400msstandard (ease-out)
fade-in—300msstandard (ease-out)
zoom-inscale 0.95300msbounce (overshoot spring)

ease isn't overridable per instance — swap animation or fall back to composing your own Framer variants for a different curve.

Props

PropDefaultOverridable?Notes
animation'fade-up'—See the table above for each effect's defaults.
delayundefined—Ms before this instance's animation starts.
durationanimation defaultyesMs. Overrides just the duration, keeping the animation's default offset/scale.
offsetanimation defaultyesPx travelled for fade-* animations. No effect on zoom-in or fade-in.
amount0.5—Fraction of the element visible before it triggers. Ignored inside a MotionRevealGroup — set it on the group instead.
repeatfalse—Replay on every viewport re-entry instead of once. Ignored inside a MotionRevealGroup.
marginundefined—Percent to shrink the bottom of the viewport inward before triggering, e.g. 50 to only trigger once the element reaches the upper half of the screen. Ignored inside a MotionRevealGroup.
transitionundefined—Merged on top of the computed delay/duration/ease, e.g. to swap in a spring.

MotionRevealGroup

  • Staggered Reveal — wrap a set of MotionReveal cards in MotionRevealGroup so they trigger together as one staggered sequence when the group scrolls into view, instead of each card triggering independently.
Pick an animation
Trigger margin
Loading cards

Cards load with skeletons on first visit — toggle Simulate loading to show or hide the skeleton UI.

import { MotionReveal, MotionRevealGroup } from '@/animations';
import { Card } from '@/ui/components/card';
 
function CardGrid() {
  return (
    <MotionRevealGroup className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
      {cards.map((image, index) => (
        <MotionReveal key={`${index}-${animation}`} animation={animation}>
          <Card
            title={`Card ${index + 1}`}
            description="Card description"
            media={image}
          />
        </MotionReveal>
      ))}
    </MotionRevealGroup>
  );
}

Props

PropDefaultNotes
stagger100Ms between each child's animation start.
delayChildren0Ms before the first child starts.
amount0.2Fraction of the group visible before the sequence triggers.
repeatfalseReplay the whole sequence on every viewport re-entry.
marginundefinedPercent to shrink the bottom of the viewport inward before triggering, e.g. 50 to only trigger once the group reaches the upper half of the screen.

MotionRevealIndividual

  • Independent Reveal — wrap a set of children in MotionRevealIndividual so each one gets its own independent trigger, with no shared trigger or stagger, unlike MotionRevealGroup.

Reach for this when wrapping a page's top-level sections, where each one should reveal on its own schedule as it individually scrolls into view.

Pick an animation
Trigger margin

Hero section

Intro copy and a primary call to action.

Features section

A grid of feature highlights.

Testimonials section

Social proof from customers.

Pricing section

Plans and a final call to action.

import { MotionRevealIndividual } from '@/animations';
 
function Page() {
  return (
    <MotionRevealIndividual animation="fade-up">
      <HeroSection />
      <FeaturesSection />
      <PricingSection />
    </MotionRevealIndividual>
  );
}

Accepts the same props as MotionReveal (animation, delay, duration, offset, amount, repeat, margin, transition), applied uniformly to every child.

Loading UI

Wrap the grid in Suspense and use CardSkeleton as the fallback while data loads. The demo uses the same markup for Simulate loading and the Suspense fallback.

import { Suspense } from 'react';
import { placeholderImageList } from '@/assets';
import { CardSkeleton } from '@/ui/components/card-skeleton';
 
<Suspense
  fallback={
    <div
      className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3"
      role="status"
      aria-busy="true"
      aria-live="polite"
    >
      <span className="sr-only">Loading cards</span>
      {placeholderImageList.map((_, index) => (
        <CardSkeleton key={index} />
      ))}
    </div>
  }
>
  <CardGrid />
</Suspense>;

Next.js docs: Loading UI and Streaming