ScrollTrigger and On Click scroll

[vimal211]

I've a scrollable accordion opening and closing while scrolling through the page. It is working fine as expected. I also need to make sure along with scrolling, while clicking each accordion the it should open and another one should close.

For example if I have 5 accordions and 4th accordion is open while scrolling, If I click the first accordion, the 4th one should close and First one should open. I don't know how to do that, 

See the Pen OJYNKYM by vimal211 (@vimal211) on CodePen.

[mvaneijgen]

Hi @vimal211 welcome to the forum!

 

Check out the ScrollTo plugin, with it you can scroll to a specific point on the page, so seen your animation is already working perfectly on scroll when you click on the first item it just needs to scroll to the start of the ScrollTrigger and for the second item it needs to scroll to the start of the ScrollTrigger + the offset of the first item, so each item needs to have a click handler that gets its index in the list and then you need to do some math to get the correct offset. 

 

I've written a guide how to exactly do this, see post below and also check @GreenSock's comment will possibly be really handy! Hope it helps and happy tweening! 

 

 

[vimal211]

@mvaneijgen I tried by following your instruction, can't able to figure out the solution, I've made change in the above

See the Pen OJYNKYM?editors=1111 by vimal211 (@vimal211) on CodePen.

itself. I'm new to gsap, finding it difficult to find solution

[Rodrigo]

Hi,

 

I think you have an extremely convoluted demo which makes it a bit difficult to follow, on top of that you have over 500 lines of CSS which doesn't make it any easier as well.

 

To follow the suggestion Mitchel made, you need to add the ScrollTo Plugin in your setup, as shown in the demos in the thread he linked in his post.

 

I believe this is a far simpler start point:

See the Pen abrBJYJ by GreenSock (@GreenSock) on CodePen.

 

Is not the complete work, but it should provide a solid start point.

 

You can borrow some logic from this codepen in order to see how the ScrollTo Plugin part works:

See the Pen wvZqwyg by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps.

Happy Tweening!