scrolltrigger ScrollTriggers not refreshing on accordion open/close

[Duo]

Hi,

 

I'm implementing ScrollTriggers with pinning on a website I'm working on but having issues when accordions are being opened/closed.

 

When the user scrolls to the product image gallery it becomes pinned to allow for the scrolling of the product content. This works great initially but once I open the INGREDIENTS tab (any tab for that matter), it obviously increases the height of the parent container while the slider stays the height of the viewport. But if I scroll down to the next product, that products slider jumps. You can see a video reference here and you can also see this in the browser by visiting: https://eldetalleusa.myshopify.com/ (view at a 13")

 

This is the code that I'm using to init the ScrollTriggers is:

this.fixedElements.forEach(element => {
  ScrollTrigger.create({
    trigger: element,
    start: "top top",
    end: "bottom top",
    pin: true,
    markers: true,
    pinSpacing: true,
  })
})

And the code I'm using to trigger the ScrollRefresh is: I've also tried ScrollTrigger.update()

this.accordions.forEach(accordion => {
  accordion.addEventListener('click', e => {
    ScrollTrigger.refresh()
  })
})

 

Any help would be greatly appreciated.

 

Thanks,

Dayne

 

[Rodrigo]

Hi Dayne,

 

What you have to do is refresh ScrollTrigger after the accordion item has been animated not before or when it starts it's own animation. If you know how long it takes you can create a setTimeout or a GSAP Delayed call for that:

this.accordions.forEach(accordion => {
  accordion.addEventListener('click', e => {
    setTimeout(() => {
      ScrollTrigger.refresh();
    }, time);// <- This time is in milliseconds 

    gsap.delayedCall(time, () => ScrollTrigger.refresh()); // <- This time is in seconds
  })
});

If you keep having issues let us know and please include a minimal demo. Is really hard for us to debug or pinpoint problems with a video and/or live site where we can't tinker with the code.

 

Happy Tweening!

[Duo]

Hi @Rodrigo

 

Thanks so much for your quick response! I've just implemented your code update and it looks like it's working perfectly so thank you for all of your help,

 

Dayne