behavior is different on live update and page load (with react)

[amapic 3 Likes (Newbie)]

Hi,

To learn gsap, I copied by hand an existing code from an online tutorial. The behavior seems different on live update and page load.

On page load, the last animation is triggered a second time after the others.

Do you know why ? It must be very easy but I am totally new to gsap.

 

My code copied by hand is here: https://codesandbox.io/s/learn-gsap-create-react-app-forked-3kc74k?file=/src/App.js

and the original is here : https://github.com/wrongakram/GSAP-imageReveal/blob/master/src/App.js

 

I copied/pasted the original code in my project in the 'codeOriginalGitHub.js' file

 

Thanks

 

See the Pen by (@) on CodePen

[elegantseagulls 1,450 Likes (Superhero)]

This could be happening if you're using React in Strict Mode. Also your GSAP syntax is using the old v2 syntax. You may consider looking at these two links:
 

GSAP v3 migration:

 

GSAP and React:

 

[amapic 3 Likes (Newbie)]

Thanks a lot. It was due to react strict mode.

[GreenSock 18,876 Likes (Superhero)]

Yep, I noticed several things: 

1. You're not doing proper cleanup. React 18 calls useEffect()/useLayoutEffect() TWICE which can cause you to inadvertently create multiple conflicting animations. gsap.context() is your new best friend in React. It makes cleanup and selector scoping super easy. 
2. You're using the very old syntax
3. There's no reason to use CSSRulePlugin nowadays because all modern browsers support CSS variables. I've forked your demo below to show you how to do it in a more simple way. 
4. The way you were creating your refs looked very odd to me. You don't even need to create any refs except for the root component - just leverage the simplicity of gsap.context()'s selector scoping so that you can use selector text instead of refs.
5. There's no need to create a css:{} wrapper object, and you can use a .set() instead of a .to() with a zero duration. 
6. With animations, it's typically best to use useLayoutEffect() instead of useEffect() to avoid the flash of unstyled content. 
7. You forgot to pass an empty dependency Array to the useEffect()/useLayoutEffect(). If you forget that, it'll get called on every render. 

Here's a fork showing the way I'd probably do it: 

https://codesandbox.io/s/learn-gsap-create-react-app-forked-rbz5p6?file=/src/App.js

 

Does that help? 

[amapic 3 Likes (Newbie)]

Thanks for all this.. Amazing. This is questions I was wondering about.