GSAP animation is not running when refreshing page

[Andy Bui]

Hi GSAP people,

 

Sorry for cannot providing codepen at the moment, I will provide it later. This is my first time using react and trying to do with GSAP animation, but when I run the website the animation is not executed, I even try to refresh and hard refresh but nothing happen. But when I update the code and save it , the code now can be runned, jsut do 1 small update and the animation will run, but not when refreshing the page. Can anyone help me on this please ? Thanks

[mvaneijgen]

Without a demo we can't test anything for you. The only thing I can see is that you use React.useEffect() and our docs uses useLayoutEffect(), see the following post 

 

You're also using the old V2 syntax, but this would not change the animation, you do ave a weird position parameter `+=0.0`, this seems unnecessary and maybe even breaks the animation, but I can't test it without a minimal demo. Hope it helps and happy tweening! 

[Andy Bui]

hi @mvaneijgen Here is my codepen: 

See the Pen ExGNjLy by tcb2307 (@tcb2307) on CodePen

In this codepen, the code is not even running because it is not in live server. But in live server, it will run when we did some changes and save on the code, but not happening when we reload the page

[mvaneijgen]

Using Codepen is a suggestion, if you must working in React, you can also use our Stackblitz starter templates that you can fork, here is the one for React 

[mvaneijgen]

Oh, your pen was running fine. Ignore my last message. 

 

I've moved your boxes variable to inside the useLayoutEffect and it works fine. You're better of not animating properties like top, left, bottom, right, animating the transform properties are much more performant.

 

I've also moved the duration property to inside the tween object. Hope it helps and happy tweening! 

 

See the Pen dywOoxd?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

[Andy Bui]

@mvaneijgen OMG Thanks a lot, I didn't know the solution was that easy.

[mvaneijgen]

Me neither. I never use React, I just console.log(boxes) and saw the it was empty. Then I tried moving the variable to inside the useLayoutEffect() to see if it made a difference and it did! That shows you debugging is really important when developing something 😅

[Rodrigo]

Yeah, Mitchel is right about debugging as much as possible in every scenario.

 

The reason why your boxes weren't present is because a mix of JS and how React works. So basically the part of your code with the toArray() method was running before the return statement of your component, so at that point the boxes weren't present in the DOM, hence the empty array. Using useLayoutEffect guarantees that the hook will be ran after the DOM has been updated on the first render of the component (that because of the empty dependencies array) and the boxes will be there.

 

Finally I'd strongly recommend you to read the resources in the React page of our Learning Center:

 

Hopefully this clear things up.

Happy Tweening!