[ScrollTrigger misbehaving on first load, but works perfectly immediately after view port resize or page reload]

 

On 5/5/2023 at 1:03 AM, Rodrigo said:

Hi @4mander and welcome to the GreenSock forums!

 

I tested both links on Ubuntu 20 & 22 on the latest Chrome and Firefox and I can't see the issue you're mentioning. I cleared the cache and I never see the issue.

 

What you could do is preload the images and create the ScrollTrigger instance once the image has loaded. Another option could be that you're lazy loading the images thus creating a problem with the calculations ScrollTrigger makes.

 

Unfortunately is really hard for us to debug a live site and since this doesn't happens on your codepen, it could mean that something else in your setup is causing this behaviour.

 

Sorry I can't be of more assistance.

Happy Tweening!

 

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.

[ScrollTrigger misbehaving on first load, but works perfectly immediately after view port resize or page reload]

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 - 

 

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?

See the Pen MWPaBqa by hariiprasath (@hariiprasath) on CodePen