Start and End markers are offsetted from the trigger, scrolltrigger

[iamruletik]

Hi everyone! I'm also a noob to gsap and scrolltriger. And I encountered a problem with scrolltrigger. I have 3 animations on my website https://units-update.webflow.io/. Each uses scrolltriger. First 2 are working great. But when I get to the 3 animation i see that "start" and "end"  markers are in wrong places.



so as you see in screenshot I have div "#locations-slider" which way below than "start" marker is.

my code actually is quite simple

gsap.to("#locations-slider",{
      scrollTrigger: {
        trigger: '#locations-slider',
        start: 'top top',
        toggleActions: "play none none reverse",
        scrub: 0.6,
        markers: true,
      },
  	xPercent: -70,
  });

but whe n I resize window it repositions where it should be


What it could possibly can be? I've tried change layout, delete other animations, but no luck. Tried put Scrolltrigger.refresh();
I also checked this topic 

but it doesn't help

PS: Here I checked site with devtools. And strangely I found layout shift when I reload page from this place and not from the start.

Please guys help me, i'm miserable

 

 

[Sveninyo]

Hello @iamruletik

welcome to the GreenSock forum

To get quick and helpful answers here, I advise you to first create an account on CodePen. Then post your CodePen and describe what you want to do.

 

Secondly, I would advise you to learn the basics of frontend development (HTML, CSS, JS). If you use tools like Webflow you will get fast results but you will never understand 100% what is going on under the hood.
 

[Rodrigo]

Hi,

 

On top of @Sveninyo's advice and request for a minimal demo, be completely sure that your ScrollTrigger instances are created in the order they should happen in your app, so ScrollTrigger takes into account for it's calculations any pinning it has done before.

 

Also if you have images or custom fonts, be sure that they are loaded before creating your ScrollTrigger instances in order to avoid layout shifting after creating the ScrollTrigger instances.

 

Hopefully this helps.

Happy Tweening!

[iamruletik]

@Rodrigo @Sveninyo Thanks for commenting. I couldn't replicate this problem in codepen. But I found solution after your comments. It was actually quite stupid. 

In webflow I had all pictures set to "lazy load" and when I set it all to "eager" everything start to work normally. I think this what caused layout shifts. Thanks @Rodrigo for heads up to check images and custom fonts.