Problem with gsap.context() and revert

[misticvm 5 Likes (Newbie)]

i have a problem with revert method and gsap.context(). The animation breaks when i place it inside the context. I have an example where you can see the complete code and prove it.

 

https://codesandbox.io/s/damp-snowflake-8ohesq?file=/src/App.js:4052-5848

 

Can anyboy help me with this?. Thanks

 

Regards

[Rodrigo 5,887 Likes (Superhero)]

Hi,

 

You have an odd setup IMHO. Why you have a useEffect listening for a change in a ref when you could just create a method and call it from the onComplete callback. Also right now you're toggling the isTweening value twice, when you animate the texts and when you animate the slides. 

 

I think this is a far better approach that uses GSAP Context correctly in order to properly cleanup all your GSAP instances in case the component is unmounted:

https://codesandbox.io/s/withered-cookies-oe6smp?file=/src/App.js

 

Hopefully this helps.

Happy Tweening!

[misticvm 5 Likes (Newbie)]

Hi, Rodrigo.

The link is not working. 

[Rodrigo 5,887 Likes (Superhero)]

Hi,

 

Yeah for some reason codesandbox is being weird, it wouldn't be the first time 🤷‍♂️

 

Instead of finding a way to make the sandbox link work I ported the example to Stackblitz:

https://stackblitz.com/edit/stackblitz-starters-91fcze?description=A create-react-app project based on react and react-dom&file=src%2FApp.js&title=React Starter

 

I recommend you that for future questions just use Stackblitz, far more stable and less troubles than in codesandbox.

 

Happy Tweening!

[misticvm 5 Likes (Newbie)]

12 hours ago, Rodrigo said:

I recommend you that for future questions just use Stackblitz, far more stable and less troubles than in codesandbox.

Ok, i get it. I´ll use it the next time. I appreciate the help. i will take a look to the code. 

Thank you very much.