Rounded draggable carousel of cards with motionpath

[XANDER2]

Hello everyone. I want the card with the active class to be centered on top initially. And it is also unclear why draggable does not work properly. It is necessary, if we did not move the circle to the next card, then return it back to the active one, and if we moved the circle a little further and stopped, then move it to the next card and make it active. The wrapper block must not drop the rotate value below 0.

I really need your help, I've been working on this task for a very long time

See the Pen vYbjRMY by xander0000 (@xander0000) on CodePen

[Rodrigo]

Hi @XANDER2 and welcome to the GSA Forums!

 

Maybe this demo can help:

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

 

Happy Tweening!

[XANDER2]

15 hours ago, Rodrigo said:

Hi @XANDER2 and welcome to the GSA Forums!

 

Maybe this demo can help:

 

 

 

Happy Tweening!

This is a cool solution, but it doesn't quite fit. Because rotate can still be less than 0 and more than 360

[mvaneijgen]

I know it sounds boring, but I highly recommend just reading the docs every once in a while definitely when starting a new tool, you'll be surprised how much has already been thought off! Hope it helps and happy tweening! 

 

https://gsap.com/docs/v3/Plugins/Draggable/#bounds

 

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

[XANDER2]

Thank you so much. Love u)❤️

4 hours ago, mvaneijgen said:

I know it sounds boring, but I highly recommend just reading the docs every once in a while definitely when starting a new tool, you'll be surprised how much has already been thought off! Hope it helps and happy tweening! 

 

https://gsap.com/docs/v3/Plugins/Draggable/#bounds

 

 

 

Love u)