Circular Carousel MotionPath

[zurakobakhidze]

Hello GSAP Community! Thank you so much in advance for your help!

 

I am trying to create a Circular Carousel and I was able accomplish some of it in the CodePen below. However, I think my approach is really inefficient and bulky . Currently the carousel is only moving on its own, but I am looking to add interactive option where if you click one of the items the carousel rotates and the clicked item becomes active at 12 o'clock. All my attempts at this interactive option have failed.

 

I would love to find a more efficient code for what I currently have and also add the interactive functionality.

 

All your help is greatly appreciated!

See the Pen ExRYqVO by Kobakhidze (@Kobakhidze) on CodePen

[GreenSock]

Yeah, there are definitely ways to simplify this. Question: you said "circular" but it doesn't look to me like that shape is a circle (it's more of an oval). I'm curious if you want it that way or not because if you truly want a circle, it could be approached in a very different way. 

 

In general, though, the approach I'd take is probably much more "meta" - I'd just loop through and create a tween for each element going from 12 o'clock all the way around with ease: "none". Probably set each to repeat: 1. Then, place those tweens in a staggered fashion onto a master timeline so that they're spaced out properly (one is at 4 o'clock when another is at 12 o'clock and another at 8 o'clock, for example). Pause that master timeline. Then use a simple tween to animate between two positions on the master timeline where all are in position, like when the very first tween starts its first repeat, lasting one full duration so that it ends when that tween completes and it's back at 10 o'clock. Now you can just scrub that tween to whatever part you want. Your "interactive" stuff would simply animate that tween's progress to the corresponding time where that desired element is at 12 o'clock. 

 

I hope that at least gives you a nudge in the right direction. If you need paid custom consulting, you can contact us or post in the "Jobs & Freelance" forum. 

 

Thanks for being a Club GreenSock member! 

[zurakobakhidze]

Hi Jack, thanks for the tips! I'll try building out your suggested method, even though I think half of it flew over my head .

 

Regarding the shape, you are correct, I am looking for an Oval Carousel. However, Circular is a plan B if Oval doesn't work. I did find an example

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

 which is Circular and it has exactly the "interactive element" I am looking for. But, I wonder if it would be possible for this one to auto play and have the active element at 12 o'clock vs 3? Any tips there?

 

Thanks again for the reply. GSAP is such an incredible tool – happy to be a member!! ❤️

[GreenSock]

Absolutely, you can add auto-advancing with a setTimeout() or gsap.delayedCall(). And you can adjust the active element to be at the top. I don't have time to rip that whole demo apart to make it work that way, but it's certainly doable. Heck, you could even make it draggable/spinnable with some extra code  And it's also possible to make it oval. 

[zurakobakhidze]

Appreciate the tips Jack! Thanks!