Kriszzy01

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

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!

https://codepen.io/Kriszzy01/pen/RwKJxQm 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.

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!

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.

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.

Thank you. I found a similar demo

Hey guys, I'm still new with GSAP so I am currently trying to replicate animations others have done that I find interesting. I am trying to replicate the animation used to move back and forth sections on rafalbojar.com, and I can't seem to do it. I feel they're using a debounced mousewheel event to call the animation logic and not scrollTrigger. Anyone with any ideas how to implement this animation?