ScrollTrigger for multiple sections

[Daniel Völk]

Hello, I'm new to GSAP and I therefore hope that this is an easy to fix problem.

 

I try to recreate this CodePen on WordPress, and it's working, but only when I'm logged in. When I'm logged out, then the first few elements work, but the animation is always going shorter and then it stops and the last elements aren't animated.

 

So the ScrollTrigger isn't attached to the element correctly, but instead a bit above the element. So the elements at the top are animated, but before they are in the viewport.

 

I also set up a test: https://danielvoelk.de/test-parallax/

 

Here is a video how it looks logged in vs logged out:

https://drive.google.com/drive/folders/1HOUSFJCBhLmrVxBoDzpkJZngQKoYWRGe?usp=sharing

 

I tried to debug it with scroll-start and end (attachment), but is this even possible with ScrollTrigger?

 

Does anybody have an idea what the problem could be?

See the Pen QWNqBvL by GreenSock (@GreenSock) on CodePen

[ZachSaucier]

Hey Daniela and welcome to the GreenSock forums.

 

I think the issue happens because you're initiating the ScrollTrigger before the images have loaded (so the element size and positions are different than after the images load). You should either add width and height attributes to your images if you know their dimensions (so that the image is always sized correctly even if the images haven't loaded yet) or call ScrollTrigger.refresh() when the images load. You could either do it each time after a relevant image loads or via another similar method. It's actually one of the most common ScrollTrigger mistakes.

[Daniel Völk]

Hey Zach,

 

you're 100% correct, except for my name. But when you reply at this pace you can write my name wrong, no problem. 

 

The problem was the lazy loading and this didn't happen when I'm logged in. This code fixed it:

 

jQuery("img.lazyload").on("load", function () {
     ScrollTrigger.refresh();
});

 

I hope this isn't bad practice to call this refresh function that often.

 

Thank you so much for the fast reply.

 

I was actually reading exactly this, but I thought that I don't load new content. This is the reason I stuck.

 

I totally forgot about lazy loading (it's pretty new on WordPress).

 

Thanks again

 

Kind regards,

Daniel

[ZachSaucier]

3 minutes ago, Daniel Völk said:

I hope this isn't bad practice to call this refresh function that often.

It shouldn't be noticeable in most cases, but obviously if you can figure out clever ways to get it to fire less that'd be good