docs Typo in documentation example

[lafeuille]

Hi there !

There is a typo in the example of the  documentation here:
https://gsap.com/resources/react-advanced/#passing-down-a-callback-to-build-a-timeline

The `contextSafe` callback is not extracted from the first usage of the useGSAP hook usage.

function App() {
  const [reversed, setReversed] = useState(false);
  const [tl, setTl] = useState();

  // Here the `const { contextSafe } =` part is missing
  useGSAP(() => {
    const tl = gsap.timeline();
    setTl(tl);
  }, []);

  const addAnimation = useCallback((animation, index) => {
    tl && tl.add(animation, index * 0.1);
  },[tl]);

  // contextSafe wrapper called here but not defined previously
  const toggleTimeline = contextSafe(() => {
    tl.current.reversed(!tl.current.reversed())
  });

 

That being said, the codepen later in the doc has the correct code !

 

As always, thanks for the brilliant work and everything
Regards
Félix

[mvaneijgen]

Hi @lafeuille thanks for the feedback!

 

We'll get this sorted asap (might take a bit longer at the moment), but thanks for bringing it to our attention. Always great to have someone read the docs carefully.

 

Happy tweening! 

[Rodrigo]

Hi,

 

Great catch! That particular callback is not actually creating any GSAP instance, just changing the reversed status of the Timeline, which is stored in a ref to keep it through re-renders, that's all. So contextSafe is not really needed in this case, as shown in this demo:

https://stackblitz.com/edit/gsap-react-basic-f48716?file=src%2FApp.js

 

We'll try to get it fixed ASAP!

 

Happy Tweening!