You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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.
The text was updated successfully, but these errors were encountered:
When using
useGsap
with a dependencies array,revertOnUpdate:false
and when running in production mode OR without strict mode in developmentcontext.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 ofrevertOnUpdate
.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.
The text was updated successfully, but these errors were encountered: