@theo-js/react-gsap-reveal Playground

Example 1: Basic Reveal

<Reveal>
  <RevealedElement />
</Reveal>

Example 2: Staggered Reveal

1st child
2nd child
3rd child

<Reveal className="flex! gap-8" as="ul" childAs="li">
  <RevealedElement>1st child</RevealedElement>
  <RevealedElement>2nd child</RevealedElement>
  <RevealedElement>3rd child</RevealedElement>
</Reveal>

Example 3: repeating Reveal

Repeat me

<Reveal repeat>
  <RevealedElement>Repeat me</RevealedElement>
</Reveal>

Example 4: predefined animation with custom options

Default slide left animation

<Reveal
  animation="slideLeft"
  options={{ duration: 2, ease: "elastic.out(1, 0.3)" }}
>
  <RevealedElement>Default slide left animation</RevealedElement>
</Reveal>

Example 5: custom animation defined via createRevealSystem factory

Custom animation

import { createRevealSystem } from "reveal-system";

const { Reveal } = createRevealSystem({
  customAnimations: {
    rotateIn: {
      from: { opacity: 0, rotate: -360 },
      to: { opacity: 1, rotate: 0 },
    },
  },
});

<Reveal
  animation="rotateIn"
  options={{
    alignItems: "center",
    ease: "elastic.out(1, 0.3)",
    duration: 1.5,
  }}
  repeat
>
  <span>Custom animation</span>
</Reveal>

Example 6: Custom Defaults

Custom Defaults (2s)

Custom Defaults with instance override (6s)

import { createRevealSystem } from "reveal-system";

const { Reveal, RevealDefaultsProvider } = createRevealSystem({
  customAnimations: {
    rotateIn: {
      from: { opacity: 0, rotate: -360 },
      to: { opacity: 1, rotate: 0 },
    },
  },
});

<RevealDefaultsProvider
  animation="rotateIn"
  options={{ duration: 2 }}
>
  <Reveal>
    <span>Custom Defaults (2s)</span>
  </Reveal>

  <Reveal options={{ duration: 6 }}>
    <span>Custom Defaults with instance override (6s)</span>
  </Reveal>
</RevealDefaultsProvider>