Jump to content
Search Community

ScrollTriggers not refreshing on accordion open/close

Duo test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts



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 => {
    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 => {


Any help would be greatly appreciated.





Link to comment
Share on other sites

  • Solution

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(() => {
    }, 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!

  • Like 1
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...