Low-level access

You are able to use the complete API of the underlying GSAP objects. Just add a reference to the React Tween or Timeline components and get the Tween or Timeline objects from GSAP by calling the getGSAP() method on it:

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

Usage with Tween

() => {
  const tween = React.useRef(null)
  return (
    <Fragment>
      <Tween
        ref={tween}
        to={{ x: '200px' }}
        duration={2}
        playState={PlayState.stop}
      >
        <div
          style={{ width: '100px', height: '100px', background: '#ccc' }}
        />
      </Tween>
      <button onClick={() => tween.current.getGSAP().play(0)}>Play</button>
      <button onClick={() => tween.current.getGSAP().seek(1)}>Seek</button>
      <button onClick={() => tween.current.getGSAP().pause(0)}>Stop</button>
    </Fragment>
  )
}

() => {
  const tween = React.useRef(null)
  return (
    <Fragment>
      <Tween
        ref={tween}
        to={{ x: '200px' }}
        duration={2}
        playState={PlayState.stop}
      >
        <div
          style={{ width: '100px', height: '100px', background: '#ccc' }}
        />
      </Tween>
      <button onClick={() => tween.current.getGSAP().play(0)}>Play</button>
      <button onClick={() => tween.current.getGSAP().seek(1)}>Seek</button>
      <button onClick={() => tween.current.getGSAP().pause(0)}>Stop</button>
    </Fragment>
  )
}

Low-level access

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Usage with Tween

Usage with Tween