Start and end point loading wrong

[camAnana]

Hey everyone!

 

I'm using ScrollTrigger to change the background color of the body when a section scrolls in. I have multiple sections related to this ScrollTrigger and everything is working fine. The codepen that I've added is just to show my ScrollTrigger code

 

The only problem that I have is that I have a lot of images on this website and inside these sections, so their start and end points aren't being positioned correctly because they get placed before the images load (the section is smaller at that moment). When I resize the screen or reload it after all the images are loaded, the start and end points are placed correctly.

 

What can I do to solve this? I tried loading everything related to Scrolltrigger inside this function

document.addEventListener('DOMContentLoaded', function() {

but it didn't work. I've also tried to use a timeout, but it didn't work either.

 

Thanks!

See the Pen qBgPvwm by camianana (@camianana) on CodePen

[Rodrigo]

Hi,

 

You can either use the load event:

https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

 

Or track all your images load state and execute your ScrollTrigger code after all the images are loaded. ne optcion could be David DeSandro's Images Loaded plugin:

https://imagesloaded.desandro.com/

 

Hopefully this helps.

Happy Tweening!

[camAnana]

Thank you so much! It worked!