Avoid fast scrolling during the accordion animation

[Sharath Lingam]

Hey community, hope y'all are doing well. I have shared a codepen demo in which I have added Scroll trigger animation for the accordion and it pretty much works the way I want it to do. I just want the scroll to not fast move and wait till that scroll animation is occurring(i.e. when the accordion item is expanding or collapsing). How can i do it? Also I'd like to know if my way of doing this is right.
 

Thank you so much for your time and response in advance. I really appreciate it. In case need of additional information/if any of my requests aren't clear please feel free to ask me here. Thanks again!

See the Pen MYgaBwb by Sharath-Lingam (@Sharath-Lingam) on CodePen.

[mvaneijgen]

ScrollTrigger is build to add animations to the scrollbar of the visitor. If that is not what you want then ScrollTrigger might not the the correct pick for you. Have you seen the Observer plugin https://gsap.com/docs/v3/Plugins/Observer/

 

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

I've also wrote a guide how you can step through a timeline using the Observer plugin 

 

https://gsap.com/community/forums/topic/41263-use-any-timeline-as-a-step-through-on-scroll-using-the-observer-plugin/

 

Hope it helps and happy tweening! 

[Sharath Lingam]

Thank you @mvaneijgen I'll into it and get back to you when I get something. Thanks a lot for the resources!

[Sharath Lingam]

Hey @mvaneijgen I tried tweaking the code according to the examples you have given me. But I couldn't exactly figure out what I can use to make it work. Could you help me with the next step please? Here is the update code.

See the Pen MYgaBwb by Sharath-Lingam (@Sharath-Lingam) on CodePen.

Edit: I am using Scrolltrigger because when each of the accordion open and close I will be changing the background video of the respective container.

[Sharath Lingam]

Hey @mvaneijgen pardon me for tagging you in this conversation again. Just a kind reminder of my request for help on this code, since I am working in a project and having deadlines. I really appreciate for your time and reponses for us. Thanks a lot. Looking forward for your response.

[Cassie]

Hi Sharath - Can you explain exactly what it is that you need help with? What are you trying to do and what is your demo doing that you don't understand?

[Sharath Lingam]

Pardon me for the delayed response @Cassie, thank you for your response. So basically it is a scroll triggered accordion. When I reach the viewport of that accordion sections container top I want the accordions to start animating like opening one by one while closing the previous ones on scroll. I need the accordions to behave like this according to the users scroll, if they scroll up they must open upwards, if down vice versa. I'm sorry if I'm asking for more but it would be really helpful for me to have the experts like y'all take a look into it. Thanks a lot I really appreciate you guys taking time to respond.

[mvaneijgen]

I've add some debugging tools to your setup, to better understand what is happening. 

 

You probably don't want to animate automagically to the first label, see line 37 and you do want to add a label to the beginning of the timeline so that when so that you start with everything open.

 

Next I would highly recommend taking another look at the post I'd shared, it has a lot more setup that you'll need to make your pen work. You also want to check if your are at the first label and then check if someone scrolls back to then release the ScrollTrigger and when they are at the end of the labels and then then release the scroll again. 

 

 

I would write out all the functions you need and then tackling them one by one. console.log() is your friend! Hope it helps and happy tweening! 

 

See the Pen gbYPgeV?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

[Sharath Lingam]

Hey @mvaneijgen I will take a look at this code and make sure I apply the resources you have shared me with. I will get back to you when I find any difficulties. Thanks a lot for your help and time, I really appreciate that

[Sharath Lingam]

Hello @mvaneijgen, I still have an issue with the scroll speed. Let's say I'm scrolling fast to where the trigger is but the site goes past the trigger then it's doing all the gsap animations we have mentioned. Example in the below code,

 

See the Pen azodXEd by Sharath-Lingam (@Sharath-Lingam) on CodePen.

 

If you scroll faster to the bottom you'll notice the scroll trigger triggers after it goes past the triggering position on the view port.

 

Please let me know if I am clear about my issue. I hope I was able to deliver my issue properly to you.

 

Thanks in advance.

[Rodrigo]

Hi,

 

Maybe the approach in this demo could be a good starting point for this:

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

 

Hopefully this helps

Happy Tweening!

[Sharath Lingam]

Hey @Rodrigo thank you. I'll check it out and let you know about how it goes. Thanks again!