GSAP ScrollTrigger/React - Animations don't work properly on first load

[YoungDevR]

Hi GreenSock community!

I am working on a Reach website with GSAP fromTo animations. Everything works properly except for the first time the website loads.
I have tried looking into other similar GSAP posts, checking my props components, trying ScrollTrigger.refresh(), but it all did not help.

I have deployed a simplified version of the website on CodeSandBox: https://codesandbox.io/s/bold-beaver-x7zoz4?file=/src/App.js
I believe you only need to review the App.js component to see what happens.

There is a JPEG image on the website and a couple of Section components. The purpose of GSAP animation is to apply changes to the image's CSS transform properties on scroll. 

The animation is supposed to first translate the image up upon scrolling to the first section, then zoom in and fade in, then zoom out and return to opacity=1. If you scroll through the whole website and then scroll again, you will see how it is supposed to work. If you only load the website, you will see the erroneous output. 

I really hope someone can help me resolve this, I am running out of ideas (and time..)

Thank you!

See the Pen by (@) on CodePen

[SteveS]

Your code sandbox is missing several dependencies for me. If you could fix that up I'll help you out.

[YoungDevR]

Thank you for your blazing-fast reply. I think I fixed my codesandbox, apologies for the issue

[SteveS]

I'm still getting an error "failed to fetch" and nothing is rendering. I tried Firefox and Chrome.

[YoungDevR]

https://codesandbox.io/s/bold-beaver-x7zoz4?file=/src/App.js

I apologize for cluttering the chat with Sandbox issues, but I have checked on several devices of different people on my side and it is all working...
 

[SteveS]

I see it now. It required me to disable my ad blockers which is odd. I'll take a look.

[SteveS]

You need to move all your tweens into one useEffect and create them in the correct order. Your code is extraordinarily hard to debug and I can't dedicate more time right now to this issue.

Please read the rest of the GSAP docs as well. You don't need to tween the "transform" property and should instead use the buiilt in gsap properties.

[Cassie]

Ooh! Also have you seen our React guide 👀
 

 

[Cassie]

Quote

Please read the rest of the GSAP docs as well. You don't need to tween the "transform" property and should instead use the buiilt in gsap properties.

i.e.

 

gsap.to(elem, {
  x: 200,
  xPercent: 40,
  opacity: 0,
  scale: 3,
  rotation: 360
})