Position SVGs on an ellipse

[SJH]

Is there any easy GSAP equation to loop through a collection of SVG groups and place them on an ellipse or possibly other shapes? I'm trying to resize my parent SVG to any mobile device screen and then position the SVG icons based on the new screen width and height. In the codepen example I've hard coded them into place but I'd like to do that programmatically.

See the Pen JjmKOLo by sandalwoodsh (@sandalwoodsh) on CodePen

[GreenSock]

For circles/ovals there's relatively simple math stuff you can do with Math.cos()/Math.sin() and radius.

 

If you've got a <path> that you want to put things on, you could probably use a motionPath and then simply adjust the progress() of the animation to place them along it appropriately (you don't actually have to animate anything). Give it a shot and if you get stuck, feel free to post back here with your attempt in a CodePen. 

 

Good luck! 

[Rodrigo]

Hi,

 

Here are a couple of examples using the MotionPath plugin:

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

 

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

 

Happy Tweening!

[PointC]

A couple similar demos from my archive that may be helpful.

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

 

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

 

Happy tweening.

[SJH]

Your examples are awesome. Thanks for the replies. I went pure JavaScript. Question though: how to flatten the ellipse? It's too tall.

See the Pen eYPzVYv by sandalwoodsh (@sandalwoodsh) on CodePen

[Rodrigo]

Hi,

 

I commented out all your JS code and there is absolutely no change 🤷‍♂️ I played with the values of the code and didn't make a lot of difference. Take a deeper look into it in order to find out where this is not working properly. Honestly I think you're overcomplicating this quite a bit. Just use 4 points on an svg and make a bezier curve with them, something like this:

Then you can play around in your JS with the points and control points to change it as you need.

 

Hopefully this helps.

Happy Tweening!

[SJH]

I know the JS code makes little difference in its current state. I matched it to what I had previously. I plan to make the shape dynamic by binding the ellipse in Nuxt and stretching it to various screen sizes.

[Rodrigo]

Ah, Ok. Well the JS has an ry parameter which I guess stands for radius Y, a smaller value in that parameter should give you a flatter elipse as far as I can tell.

 

Happy Tweening!

[PointC]

Stops by again and whispers *be lazy. use the MotionPath plugin*. Get your work done quickly and go for pizza. 🍕. YMMV.

[SJH]

Whispers to PointC, "But the motion path examples listed here are way beyond what I need to do. I need something drop dead simple...then maybe I could stretch the path to fill different mobile screens."