4mander

I just checked this on a different Win 11 PC and this still happens. All the images are set to loading="eager" so I guess lazy loading is not the problem. I found this piece of code to make a script run after an image loads: <img src='your-image-name' onload='callLoad()' /> function callLoad(){ // your code goes here } I am going to try adding the ScrollTrigger JS inside this function and see if it works. I'll post an update soon.

I am using ScrollTrigger to move a panorama photograph horizontally when vertically scrolling on the page. You can find the implementations here in these two pages on my website: https://www.hariprasath.site/play/ochres https://www.hariprasath.site/play/untainted On the first load, the pano photograph is not visible. It is just a blank space where the photo is and the rest of the page scrolls and behaves normally. Somehow it fixes itself when the window is resized or the page is reloaded. I have checked this on Brave browser (chromium), Chrome, Firefox and Edge. It does not happen every time, and for some reason, it does not happen on codepen ever. ??‍♂️ The website is built using Webflow where I have added the codeblock that you find in the codepen - https://codepen.io/hariiprasath/pen/MWPaBqa I am pasting the JS here as well: gsap.registerPlugin(ScrollTrigger); var sliders = gsap.utils.toArray('.wide-lightbox-pano'); sliders.forEach((slider) => { gsap.to(slider, { scrollTrigger: { trigger: slider, start: 'top top', end: () => slider.scrollWidth > window.innerWidth ? '+=' + slider.scrollWidth : "+=" + 0, pin: true, scrub: true, invalidateOnRefresh: true }, x: () => { return -( slider.scrollWidth - document.documentElement.clientWidth )}, ease: 'none' }); }); Is this a bug or am I doing something wrong?