Some animations work properly only after browser refresh

[tibo78]

Hello,

 

I have a weird issue, some my animations on one page work only if I refresh the browser (all animation from the last third part of my page).  It seems they are triggered already from the beginning of the loading of the page or at some point (but before the actual scrolltrigger action). But as soon as I refresh it works properly as it should be. Any clue?

 

I looked in the console, no error.

 

https://agencekokoro.com

[GreenSock]

Welcome to the forums, @tibo78. We can't effectively troubleshoot live sites like that because there are just way too many factors and we can't tweak anything and view the effect. Please provide a minimal demo if you'd like some help. 

 

It sounds like you must have some things that modify the DOM layout AFTER the page loads initially. ScrollTrigger automatically listens for that event (as well as several others) and calls ScrollTrigger.refresh() to calculate all the start/end values. But if, for example, you're dynamically loading in some images or populating elements that shift around the layout (like an <img> that has no width/height but then when the image loads, it suddenly takes up a bunch of space and pushes other elements down), that would obviously prevent things from accurately being mapped. 

 

You can call ScrollTrigger.refresh() after you're done with anything that shifts the layout around to force that correction. 

 

Aside from that, we'd really need to see a minimal demo in order to better advise you. Please don't include your whole page in that demo - the secret to effective troubleshooting is isolate, isolate, isolate. Start very bare-bones and slowly build up until it breaks. We'll gladly help with any GSAP-specific questions.