accordion and scrolltrigger conflict

[GsapNewbie]

Hi,

 

I am using alpinejs and tailwind to create an accordion and on another section am using scrolltrigger.

 

What I notice is, by default if the accordions are not open, the scrolltrigger works perfectly fine, once you click any of the accordion, especially those with more content, the scrolltrigger does not properly trigger.

 

please check the demo, am assuming I need to use scroller proxy? need a bit help on how to trigger it everytime one of the accordion item is clicked.

See the Pen RwqEYYz by dxbdevy (@dxbdevy) on CodePen

[mvaneijgen]

I didn't see any accordion code in your JS panel, so I couldn't test it, but if you hook in to that you can call ScrollTrigger.refresh() when that happens. Check out the docs https://greensock.com/docs/v3/Plugins/ScrollTrigger/refresh()

[GsapNewbie]

@mvaneijgen

 

accordion is beside "Questions" and for reference I'm using https://devdojo.com/pines/docs/accordion

[mvaneijgen]

Yes I see the accordions, but I don't see the code that makes them work. We like to scope these forums to GSAP related questions, thus it is up to you to find out how you can run this code ScrollTrigger.refresh() when a user clicks on an accordion, again that we can't help with, because the accordions are not made with GSAP, so I can't tell you how that would work, maybe the docs you've linked have the answers. 

[GsapNewbie]

i added the ScrollTrigger.refresh(); on button clicked, still not working, but if I execute ScrollTrigger.refresh(); manually in console, in seems to be working.

 

Any idea why the refresh does not work?

[mvaneijgen]

Probably because the animation of clicking open the accordion takes more than 0 seconds, so to preform the calculations you'll need to wait the same amount as the animation of the accordion being opened

[GsapNewbie]

@mvaneijgen

 

thanks! i added a delay for triggering the refresh and seems its working fine