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

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

[Scroll jumps to top of the page after click button in Wordpress using ScrollSmoother]

Hi @Rodrigo,

Thank you for your kind message and help. Sorry, I wrote carousel when I really meant accordion.

 

I did what you recommended, about upgrading to GSAP 3.11.1 and the problem was immediately resolved, without the need to change or deactivate the plugin.

Thank you again very much for your help and time.

Cheers!

[Scroll jumps to top of the page after click button in Wordpress using ScrollSmoother]

Hello, good morning

 

I am creating a website in Wordpress, where I have installed ScrollSmoother which is fantastic.

 

The problem I am finding is that when using a carousel and clicking the buttons to display the content, the scroll jumps to the top of the page (not the content in the first place) and when I scroll down again to continue browsing, the content jumps towards the top of the page. That is, the scroll loses its original position after clicking the button.

 

I tried putting a "#/" to the href to prevent the scroll from scrolling after the clicking the button, but this didn't work.

 

Also, I can't make a demo because it's a Wordpress installation, but if it helps I can add the link where it's hosted at the moment:

https://adcorp.mx/basavi/

 

Any help will be greatly appreciated. Thank you in advanced.