GSAP animations delayed

[jack0wsky]

Summary

Correct place for triggering gsap animations

Relevant information

I'm using Gatsby and gsap animation library and I'm facing problem when some animations are fired after component's render. What I mean is that first animated element appears without animation and then animation is fired. Does anyone know if animations should be triggered in some specific moment of component lifecycle to prevent such effects? I used to code animations in useEffect hook or componentDidMount function.

Environment (if relevant)

File contents (if changed)

gatsby-config.js: N/A package.json: N/A gatsby-node.js: N/A gatsby-browser.js: N/A gatsby-ssr.js: N/A

[maiya-22]

Are you using classes or functional components? As far as I am aware, the animations need to be both written and fired inside of the componentDidMount() or useEffect(()=>{},[]) functions. (Unless they are being triggered by some other event that happens after the component has loaded).

[jack0wsky]

Most of the cases I'm using functional components (useEffect hook) and I noticed that sometimes there's a strange delay of animation what's even more strange because of high speed that Gatsby offers.

[maiya-22]

I'm not sure if this is the right answer to your case, but I've had to play around with selecting with refs vs. just writing the string of the element id as the selector. In other words, passing elementRef.current vs "#element" as the first arg to the gsap function. For me, the second one works better, in general. Maybe the way that gsap selects the element from the DOM is faster than the way that the useRef function gets the element?

[jack0wsky]

Ok, I think I solved this problem. For example, if desired animations is to reveal text from left and play with opacity, the best way is to set style of this text as transform: translateX(-30px) and opacity: 0; and then make gsap.to(). It prevents delayed animation.

[blainekasten]

@jack0wsky I'm not sure we're going to be able to guide you in this situation. This feels almost react specific or just gsap specfic. Gatsby really wouldn't be involved in this part because we have a very small footprint on runtime code - and it's mostly just routing stuff.

I'm going to close this issue because it's not an issue with Gatsby. feel free to keep dialoguing and asking questions. If you think it's actually specific to Gatsby, I would say copy your code into a create-react-app project and see if it acts differently. If it indeed is acting differently with the same code within Gatsby then there is something to inspect. But I really don't think that would be the case. Happy to explore more though! Cheers