Jump to content
Search Community

Forcing scrollTrigger and scrollSmoother refresh when div is in viewport or after all elements finish loading

Miguel Espinosa test
Moderator Tag

Recommended Posts

Hello good day,

 

I have an issue within scrollTrigger and scrollSmoother. Sometimes my website loads all animations correctly, other times incompletely.

I think it has to do with the fact that scrollTrigger has already finished doing its calculations but the page hasn't finished loading all its elements yet. The reason is that if I scale the browser window, it fixes

 

Is there a way to update or refresh scrollTrigger or scrollSmoother? For example, refresh when some DIV enters the viewport or when all elements finish loading?

 

I tried adding ScrollTrigger.refresh() like this code below, but I am not sure how to implement it

 

gsap.to('.amenidadSectionColBottom', {
      opacity: 1,
      ease: 'none',
      scrollTrigger: {
        trigger: '#amenidadSection',
        start: '30% 80%',
        end: '50% 70%',
        scrub: true,
    onEnter: () => ScrollTrigger.refresh(),
      }
    });

 


Thanks in advanced for your help

Link to comment
Share on other sites

3 hours ago, Miguel Espinosa said:

Is there a way to update or refresh scrollTrigger or scrollSmoother?

Sure: 

ScrollTrigger.refresh();

 

ScrollTrigger will automatically call that when the window's "load" event fires, so in the vast majority of cases you never need to manually call that. But if you're dynamically loading things in AFTER the "load" event fires, then yeah, you'll need to call it manually once the layout is done shifting around. 

 

Also beware that if you set the loading="lazy" attribute on your <img> element(s), the browser won't wait for those to load before firing its "load" event. So you might want to make sure you DON'T add loading="lazy" or just make sure you add JS to sense when those are all done loading and then call ScrollTrigger.refresh(). 

 

If you still need help, please make sure you include a minimal demo, like a CodePen or Stackblitz

 

Thanks for being a Club GreenSock member! 🥳

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...