Looks like registering the plugins outside of useGSAP did the trick, thank you! I remember I moved the plugin registration into the useGSAP because I was getting the warning Extra attributes from the server: styleAnd found this thread, which suggested to register inside a useEffect:
I also hadn't considered to register useGSAP as a plugin as well. Here is the updated demo with your suggestions:
Putting the onComplete inside the parent timeline is indeed cleaner, but the only issue is I'm using typescript and the onComplete event and contextSafe function now give me the following errors:
onComplete: Type '() => gsap.core.Timeline' is not assignable to type 'Callback'.
Type 'Timeline' is not assignable to type 'void'.
contextSafe: Cannot invoke an object which is possibly 'undefined'.
Here is my typescript setup: https://stackblitz.com/edit/react-jjrktj?file=src%2FAnimationWrapper.tsx
(I don't get the same errors in stackblitz)
When I use my previous eventCallback method, I get no errors. But it looks like callbacks in useGSAP are context safe anyway, so is there no need for me to use contextSafe? Forgive my ignorance, just tring to understand this more. Demo:
https://stackblitz.com/edit/react-oxxh2h?file=src%2FAnimationWrapper.js
