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...

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

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!