ScrollTrigger with LazyLoad

[daniel-bogart]

Has anyone found a decent solution to using ScrollTrigger on a page with heavily lazy loaded content? One issue that I've had is that, while ScrollTrigger is amazing at waiting for the DOM to load before setting positions, it's unable to account for lazy-loaded content which hasn't been loaded on the DOM, or shifts in some form or another.

I was able to solve my problem of the ScrollTrigger positions being off by removing lazy-loading, but ideally I'd love to have both. I suppose it would somehow require a way to ScrollTrigger.refresh() only once all of the lazy-loaded content has been loaded up until the ScrollTrigger start. 

Has anyone found a good solution to this dilema? Thank you in advance for your input

[Cassie]

Hiya! Yeah it can be a bit fiddly sometimes. But calling ScrollTrigger.refresh() as new items get added to the DOM should work.

 

Do you have a demo? It's pretty situation dependant...

[GreenSock]

Yeah, you could probably grab all the lazy-loading stuff (I assume images), loop through them, add "load" event listeners and then when the last one finishes, call ScrollTrigger.refresh(). You'd obviously have to check the queue after each one loads to see how many left...so that when there are no more left, that's when you do the refresh.