GSAP Circle Timeline Scroll trigger Animation Unnecessary scroll speed.

[alfredmarshall68]

By default the scroll triggers speed of rotation depends on the speed of mouse scrollbar which i want to avoid. Even though if someone scrolls faster or slower it should only snap from one date to other once only. Like on demo from your side for slide.

Like Here.


 

See the Pen WNmKEQJ?editors=1010 by Alfred-Marshall (@Alfred-Marshall) on CodePen

[mvaneijgen]

Hi @alfredmarshall68 welcome to the forum! 

 

That is what ScrollTrigger is made for. With ScrollTrigger animations get hook to the scrollbar, you can view the scrollbar as the progress bar of a video on Youtube and if you drag the progress bar around your animation gets played. 

 

So you're not looking for ScrollTrigger because that is not the effect you want. 

 

Have you seen the Observer plugin. https://gsap.com/docs/v3/Plugins/Observer/ with it you can watch for scroll events and then do some logic based on that. Eg watch for the scroll down and animate to the next point in your animation. 

 

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

 

And here an example that mixes normal scroll with the Observer plugin. Hope it helps and happy tweening! 

 

See the Pen oNQPLqJ by GreenSock (@GreenSock) on CodePen

[alfredmarshall68]

Hello @mvaneijgen
Thank you for quick response,

Could you please help me to achieve the desire output. I tried different methods and went through many codepens from GSAP and documentation however could not solve that.
I just want one snap on one scroll.

[mvaneijgen]

I was looking at your pen and tried to modify some things, but I couldn't get it to work. What I was thinking is creating an animation that rotates in steps instead of 360deg, so create a tween for each step, so with each step animate the circle and all its points 60deg (360/ 6 items), but it seems your dots ar note on (or in the circle) 

 

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

 

Here is an example on how you could set things up to get things to do what you want. The workflow I should follow would be create an animation (don't worry about scroll at all), give all animations distinct tweens and places labels at points where you know in the future you want your tween to stop playing. Then when you're happy with all that you can just use the function in the below pen to tweenToLabel(). Hope it helps and happy tweening! 

 

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

 

 

[alfredmarshall68]

Thank you for looking into my problem.😄
Could you please help me ? I have been trying different methods and its been 2 days I am not been able to solve.

[mvaneijgen]

I'm helping you, but if you're just looking for someone to build it for you could post in our Jobs & Freelance forum. 

 

Your current setup is not suitable for the effect you want, so you either have to live with the ScrollTrigger snap that snaps to certain points which works perfectly and does exactly what it suppose to to or rewrite your animation to work in steps and hook it up to the Observer plugin as per my latest example. This does exacly what you want and it layed out perfectly there are comments in the code, so just read through them and try to understand what it is doing. 

 

Personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working.

 

ChatGPT is great, but it is not going to help you in the long run if you want to learn to be a developer, that means diving in to the code trying to understand things and getting your hands dirty. There is a lot of info here, so try taking it in and playing with the examples till you understand what it is doing. Then make your own version step by step and when you get stuck post back here with what you've tried, that way we can see your thought process and thus better help you understand the tools!

 

See the Pen GRzrPPy by mvaneijgen (@mvaneijgen) on CodePen

 

 

I've got something working in your pen, now it is up to you to hook ik up the the Observer plugin. Again check the pen above. I’ve placed some comments in your JS to better explain things, please be sure to read through them!

 

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

 

 

[Cassie]

This is a really helpful answer, thanks @mvaneijgen

[alfredmarshall68]

Thank you for your suggestion.. ok I will try again..

[alfredmarshall68]

I am able to make it work. Thank you for all your supports. However its not working the same way on mobile phones, it works fine on tabs and desktop.
On mobile it doesn't scroll at all. Could you please help me with this? Why its not working?

See the Pen MWxqYLN by Alfred-Marshall (@Alfred-Marshall) on CodePen

[mvaneijgen]

Seems to work fine on my end iPhone 12 Pro Max

[Rodrigo]

Yep, this works as expected on Android and an iPad running ios 17.2 🤷‍♂️