react-gsap Docs
Introduction
Components
TweenTimelineScrollTriggerBasic usageUse "trigger" propStandaloneRevealSplitCharsSplitWordsControls
Plugins
Instructions

ScrollTrigger

The ScrollTrigger component is a small helper for the ScrollTrigger plugin.

Read the official documentation: https://greensock.com/docs/v3/Plugins/ScrollTrigger

It's available since version 3.2.0. Before you also could use the ScrollTrigger plugin by importing/registering and using it in a Tween or Timeline by yourself:

import { Tween } from 'react-gsap';
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
<Tween
  to={{
    x: '300px',
    scrollTrigger: {
      trigger: '.square',
      start: '-200px center',
      end: '200px center',
      scrub: 0.5,
      markers: true,
    },
  }}
>
  <div className="square" style={{ width: '100px', height: '100px', background: '#ccc' }} />
</Tween>

Basic usage

With the ScrollTrigger component, it looks like the following. If you don't add a trigger prop, it will use the ref from the Tween target.

Use "trigger" prop

Currently it's not possible to change the props on the fly. So this will not work for the trigger prop:

const triggerRef = useRef(null);
const [trigger, setTrigger] = useState(triggerRef.current);
useEffect(() => {
  setTrigger(triggerRef.current);
}, []);
return (
  <>
    <ScrollTrigger trigger={trigger}>
      <Tween
        to={{
          x: '500px',
        }}
      >
        <div>This element gets not tweened by ref</div>
      </Tween>
    </ScrollTrigger>
    <Square ref={triggerRef}>
      This element is the trigger
    </Square>
  </>
);

If you want to target a ref directly instead of using a CSS selector you can use a Timeline with a forwardRef target:

// This is the target component which "exports" 4 refs
const TargetWithNames = forwardRef((props, ref: any) => {
  const div1 = useRef(null);
  const div2 = useRef<MutableRefObject<any>[]>([]);
  const div3 = useRef(null);
  const trigger = useRef(null);
  useImperativeHandle(ref, () => ({
    div1,
    div2,
    div3,
    trigger,
  }));
  return (
    <div ref={trigger} style={{ textAlign: 'center' }}>
      <h3 ref={div1}>THIS</h3>
      <SplitChars
        ref={(charRef: MutableRefObject<any>) => div2.current.push(charRef)}
        wrapper={<h3 style={{ display: 'inline-block' }} />}
      >
        TEST
      </SplitChars>
      <h3 ref={div3}>IS A</h3>
    </div>
  );
});

You can then use the key of the exported refs in the trigger or target props. If it doesn't find a ref with this key it will use the trigger string as CSS selector.

THIS

T

E

S

T

IS A

Standalone

If you don't pass children to the component a GSAP ScrollTrigger instance will be created and can be used standalone.

You can get the instance by calling getGSAP() on the ref.