Jump to content
Search Community

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

amapic test
Moderator Tag

Go to solution Solved by elegantseagulls,

Recommended Posts


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




See the Pen by (@) on CodePen

Link to comment
Share on other sites

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: 



Does that help? 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...