camAnana Posted November 15, 2023 Share Posted November 15, 2023 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 Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted November 15, 2023 Solution Share Posted November 15, 2023 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! Link to comment Share on other sites More sharing options...
camAnana Posted November 15, 2023 Author Share Posted November 15, 2023 Thank you so much! It worked! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now