Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

context.current.revert() is called incorrectly when depedencies are updated for the first time in production mode #13

Open
Kethatril opened this issue Nov 11, 2024 · 0 comments

Comments

@Kethatril
Copy link

When using useGsap with a dependencies array, revertOnUpdate:false and when running in production mode OR without strict mode in development context.current.revert() is called the first time any dependency changes, but works correctly after that point (Where revert only triggers on unmount and not update)

This technically also happens with strict mode enabled in development however the double running of effects triggers the bug immediately before any animation can happen so it isn't visible there.

It seems to happen due to this code:
https://github.com/greensock/react/blob/b00905d1e00ce0b873e6c4b0cb09770254836b55/src/index.js#L38C5-L40C6
Where mounted.current is always false the first time this effect triggers due to it not being set to true until the subsequent effect runs. This causes the revert function to always run the first time a dependency update happens no matter the value of revertOnUpdate.

Here is a minimal example:
https://stackblitz.com/edit/gsap-react-basic-f48716-lrqm8m?file=src%2FApp.js
It is forked from one of the official examples
Strict mode is disabled, a state value that is passed as a dependency of useGsap is set to true after 5 seconds then false after 10.
If you immediately hit the toggle timeline button you will see that when the first timeout triggers the timeline gets reverted. If you then hit the button again once the second update gets triggered the timeline doesn't revert (which is the correct result)
I've verified this also happens with strict mode enabled in production mode.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant