Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Kriszzy01

Scroll based accordion

Go to solution Solved by Cassie,

Recommended Posts

Hi everyone, 

 

So I'm trying to create an accordion that reveals the region content when it is scrolled into. First issue I'm having is sometimes multiple regions open at the same time. Secondly( and I'm not sure I have any idea how to implement this), I intend to make the scroll bar skip to the position of the next accordion region when scrolled. For example, if I have 3 accordion regions, once the container is pinned, the scroll bar should skip to the position of the next accordion when scrolled. 

See the Pen vYgdjBB by Kriszzy01 (@Kriszzy01) on CodePen

Link to post
Share on other sites

Hi Christian!


For the accordion - this might be a cleaner solution. Opening each section one by one in a timeline and pinning the container while it plays out.

See the Pen a8f3c627b4d152fd68bb4055c5a9af68?editors=0010 by cassie-codes (@cassie-codes) on CodePen



You can 'snap' to certain sections in the animation but ScrollTrigger doesn't do any scroll jacking. iIt's a bit of a usability nightmare and it's very error-prone.

You can read more here about snapping and scroll-jacking -
https://greensock.com/docs/v3/Plugins/ScrollTrigger

  • No scroll-jacking, so it can be combined with native technologies like CSS scroll snapping. If you want scroll-jacking, you can use the scrollerProxy() method to integrate with a 3rd party smooth-scrolling library.
  • Like 4
  • Thanks 1
Link to post
Share on other sites

Thanks for your help Cassie! Never thought of this approach.  If you scroll really fast, it breezes through the animation, which has really been the main issue. I would like a situation where no matter the scroll speed, it only moves one step to the next.

 

I agree that scrollTrigger proxy can be the solution here, but I don't quite understand it generally, plus most 3rd part libraries (I know) do mostly smooth scrolling. 

  • Like 1
Link to post
Share on other sites

Hey @Kriszzy01,

 

You could increase the stagger amount and / or move the endpoint further 'back':

 

See the Pen LYxdPry by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

  • Like 3
Link to post
Share on other sites

 'no matter the scroll speed, it only moves one step to the next.' sounds like a very hard thing to code to be honest.

How would you know when to move on to the next section?

 

I think Mikel's right here, moving the endpoint further back to slow it down is probably the best bet!

Link to post
Share on other sites

Thanks @mikel. Extending the endpoint does slow it down. And @Cassie the requirement is quite challenging to build. 

 

Really appreciate ya'll for helping out! I have a feeling messing around with scrollTrigger proxy may do the trick. Once I understand, and if I get a solution, I'll drop it here. Thank you!

  • Like 2
Link to post
Share on other sites

See the Pen RwKJxQm by Kriszzy01 (@Kriszzy01) on CodePen

 

Hello guys, so this is basically what I intend to achieve. It works (please ignore the messy code, will fix that eventually). Issue here is because of the approach I used to make sure the first and last accordion regions remain open at the beginning and end of the scrub respectively, the transitioning for the rest of accordions differs compared to the first and last. Basically, it has this snapping nature between states which is down to directly changing the display property on the style as shown in the pen.

 

My question is, is there a better approach to achieving this result? This approach seems real hacky and though it works, I would prefer some consistency.

Link to post
Share on other sites

Thanks Cassie. This works real well. Problem is the first accordion is fixed at open. I'll work with your updated solution and find a fix. Really appreciate your help!

  • Like 1
Link to post
Share on other sites

Ah, I misunderstood, easily fixed - just need to add another little tween at the beginning. I updated the pen.

  • Like 2
Link to post
Share on other sites

Wow. Thanks Cassie. This is perfect! You've been so helpful. Really appreciate. 

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

×