Reveal

The Reveal component is basically an Intersection Observer and a Timeline component combined.

All children Tween and Timeline components get played when they are visible in viewport.

import { Reveal, Tween } from 'react-gsap';

Usage with Tween

Add a little space for testing

|

so scroll down

|

|

|

|

|

|

|

|

|

|

<Reveal repeat>
  <Tween from={{ opacity: 0 }} duration={2}>
    <h3>This headline is fading in</h3>
  </Tween>
</Reveal>

Fade in from left example

Of course you can outsource animations to separate components. In this example a FadeInLeft animation:

const FadeInLeft = ({ children }) => (
  <Tween
    from={{ opacity: 0, transform: 'translate3d(-100vw, 0, 0)' }}
    ease="back.out(1.4)"
  >
    {children}
  </Tween>
);

Also note the use of the trigger prop. In this case the <H3> wouldn't trigger because it's out of the viewport initially: translate3d(-100vw, 0, 0) If no trigger is passed, the first element from any child Tween or Timeline that gets beyond the threshold is used.

<Reveal repeat trigger={<div />}>
  <FadeInLeft>
    <h3>This headline is coming from left</h3>
  </FadeInLeft>
</Reveal>

forwardRef trigger

You can also create a forwardRef component as trigger if you need a more complex wrapper or trigger.

export const AnimationTrigger = React.forwardRef<HTMLDivElement>(({ children }, ref) => (
  <div
    ref={ref}
    style={{
      paddingTop: '200px',
      paddingBottom: '200px',
      background: '#f0f0f0',
      textAlign: 'center',
    }}
  >
    {children}
  </div>
));

<Reveal repeat threshold={1} trigger={<AnimationTrigger />}>
  <RubberBand>
    <h2>I get triggered later</h2>
  </RubberBand>
</Reveal>

Props