Jump to content
Search Community

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

4mander test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

On 5/4/2023 at 8:31 PM, 4mander said:

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


"When the window is resized or the page is reloaded" - this reminds me a lot of my problem

 

  • Like 1
Link to comment
Share on other sites

Yep, it definitely looks like you've got loading="lazy" on stuff on your page. That's very likely the problem. I'd remove that or wire up your own script to sense when everything is done loading and shifting the page around and then call ScrollTrigger.refresh(). 👍

Link to comment
Share on other sites

 

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.

Link to comment
Share on other sites

I wouldn't do that. You'd be calling ScrollTrigger.refresh() after EVERY image loads. That's very wasteful and expensive. You should just call it once they're ALL done. 

 

21 minutes ago, 4mander said:

All the images are set to loading="eager" so I guess lazy loading is not the problem.

When I viewed source on your page, there were definitely images with loading="lazy".

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...