Fly The Coop
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by 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
Circular loop
in GSAP
Posted
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!