Circular loop

[Fly The Coop]

Hi guys, I'm trying to create a looping circular carousel but I'm stuck on how to wrap the boxes to the other side when rotating the circle.

 

As you can see in the codepen, I've prepared an array with all possible positions around the circle on which the boxes should be placed.

 

Much like the horizontalLoop() helper function, the boxes should be moved to the end when they are rotated out of view.

 

While writing this I'm thinking of creating a tracker for the positions and index of the box placed on each position to update, is that the way to go?

 

Would greatly appreciate if someone could give me nudge in the right direction. 

Many thanks, GSAP rocks!

See the Pen ZEqBygq by flythecoop (@flythecoop) on CodePen

[Rodrigo]

Hi @Fly The Coop and welcome to the GreenSock forums!

 

First thanks for being a Club GreenSock member and supporting GreenSock! 💚

 

I think is far better to use this example:

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

 

Also you could use the MotionPath Plugin for setting the position of the elements:

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

 

Hopefully this helps.

Happy Tweening!

[Shrug ¯\_(ツ)_/¯]

Welcome to the forum @Fly The Coop,

 

In addition to the examples that @Rodrigo provided above, the following additional examples might prove useful for yourself or someone else also.

 

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

See the Pen vYgLYBL by medienbaecker (@medienbaecker) on CodePen

See the Pen eYNaxxd by mikeK (@mikeK) on CodePen

See the Pen GvyXYX by PointC (@PointC) on CodePen

 

Hopefully something helps your efforts towards your goals. 👍

 

[Fly The Coop]

Thanks @Rodrigo and @Shrug ¯\_(ツ)_/¯ for helping out!

 

Based on your suggestions and examples I came with the following codepen which is the effect I'm looking for using the MotionPathPlugin - it's like an arched infinite carousel.

 

See the Pen zYmNgOJ by flythecoop (@flythecoop) on CodePen

 

Before I continue down this route and add snapping, indexing, etc. Could you confirm this is the way to go for this effect?

 

Many thanks!

[Rodrigo]

Hi,

 

Different scenarios and setups require different solutions. Right now this seems to work very good and has excellent performance. If it does what you need we're on if it ain't broken don't fix it territory  The code is simple and easy to follow so I wouldn't change anything at this point.

 

Good luck with your project!

Happy Tweening!