Jump to content
Search Community

ScrollTrigger and On Click scroll

vimal211 test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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! 

 

 

  • Like 1
Link to comment
Share on other sites

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!

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...