quick flash/disappear/appear/jump in translateX when setting it before animation

[David12345]

Hi Everyone,

 

I have a timeline (React based app) where the translateX is set with set at the very beginning of the timeline with no transition, then the translateX position is animated. From time to time (every 5 occurrences when I hit refresh and replay the timeline) there is a quick flash/disappear/appear/jump in the translateX. This happens even if I set with .set, .quickSetter or .to with 0 transition.

Does anyone have an idea why this might be happening?

[GreenSock]

That sounds like the "flash of unstyled content" gotcha. Please see this: 

 

It's not a bug or issue with GSAP - it's simply due to the fact that the browser CANNOT run the JS until things are adequately loaded and parsed, so you'll often see things showing in the original state and then BOOM when the JS executes it looks the way you intended. Solution: set the initial state in CSS. I'd strongly recommend also setting at least the transforms via GSAP too (even if it's set in the CSS) because it allows GSAP to cache it (boost performance) and it also ensures accuracy. See this article: 

 

Happy tweening!

[OSUblake]

And if you're using Hooks, use useLayoutEffect instead of useEffect.

 

[OSUblake]

6 hours ago, OSUblake said:

And if you're using Hooks, use useLayoutEffect instead of useEffect.

 

Check out the avoiding FOUC section in our React guide.

 

 

[David12345]

Thank you this helped.