Jump to content
Search Community

pathDataToBezier Multiple objects on one path/orbit animation

Tasty test
Moderator Tag

Go to solution Solved by PointC,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hey 


I have small issue with figuring out how to use the pathDataToBezier plugin, I've read a lot of similar topics, and probably I could do this with just some pure js or even pure css.

But I wonder is there some simple way to animate few objects on the same path?

I used some very simple example - right now, only the red 'planet' sticks to it's orbit, but it also ends in the different point it should - this should be just perfect closed orbit for all objects on it.

I'm probably missing something very basic here :(

Any suggestion on how to bite this would be a huge help ! There will be a lot of objects on that orbits, and I would love to have a lot of control there.



Thanks!
 

See the Pen VpwdNx?editors=1010 by Dikus (@Dikus) on CodePen

Link to comment
Share on other sites

  • Solution

Hi Patryk D&D  :)

 

Are these all going to be circular orbits? If that's what you need, I don't see any reason to use the pathDataToBezier() method. I think setting svgOrigin to the center of the SVG and tweening the rotation should work well. I've forked your pen and added a class of .planet to those circles that should orbit. I then used a loop to make each of them orbit around the center of the SVG. Right now I'm using the index of each element to create different delays and tween durations for each planet. You can certainly generate those values randomly or pull them from an array too. 

 

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

 

Unless I'm misunderstanding your desired outcome, I think this will be a bit easier to manage. Here's some more info about svgOrigin:

 

https://greensock.com/svg-tips

 

Hopefully that helps.

 

Happy tweening.

:)

  • Like 4
Link to comment
Share on other sites

Yep, Craig is right. That's an easier approach, but let me explain why your demo wasn't working the way you wanted...

  1. The motion path is all based on the underlying path, thus it has a very particular starting point and ending point. So your objects would jump to that starting point initially, but it sounds like you wanted a different behavior, like to have it figure out where the closest spot on that path was to where your outter-orbit elements happened to be sitting. That's not something the plugin does for you. It's not a trivial thing to do, but there are several techniques you could use. That being said, you probably don't need that because Craig provided a cleaner solution anyway.
  2. The data you generated in "motionPath" was all based on offsets from "#outter-orbit-1", and you tried applying that to "#outter-orbit-2" as well. You actually did the right thing creating "motionPath2" but forgot to use that in your tween :)
  3. You forgot to set the xPercent and yPercent on "#outter-orbit-2" to -50 too

Let us know if you need anything else. 

  • Like 4
Link to comment
Share on other sites

Thanks! That's exactly what I needed, svgOrigin, love it ! That article looks very nice too, haven't read that yet.


I had tried that approach earlier Jack, and I was shocked why it didn't worked, and where the other planet went...it worked just fine, the other planet was stacked on top of the other one... ^_^'



Again thanks ! I should be able to handle that now !
 

  • Like 2
Link to comment
Share on other sites

That article looks very nice too, haven't read that yet.

Glad to hear that works for you. Yeah - that article is excellent. Everyone is aware of the great docs for GSAP, but I think a lot of members may overlook the blog. There are so many good articles, videos and demos in there. I encourage anyone reading this to look through the GreenSock blog when you get a chance. You'll learn a lot.

 

https://greensock.com/blog/

 

Happy tweening.

:)

  • Like 3
Link to comment
Share on other sites

Yup, the blog is just awesome ! I need to catch up with all the posts there :)

I have one more issue that changes everything - the orbits aren't perfect circles (damn you reality) 
This even wouldn't be visible - but the orange circle exposes that clearly

See the Pen BWNdzo by Dikus (@Dikus) on CodePen


 

 

 That's not something the plugin does for you. It's not a trivial thing to do, but there are several techniques you could use. That being said, you probably don't need that because Craig provided a cleaner solution anyway.

 

 

If you can Jack, please expand a bit - what technique/s would you suggest? 


Of course any help will be much appreciated ! 
Thanks :)

Link to comment
Share on other sites

Hi Patryk D&D  :)

 

Sorry this response is late. I thought this was answered, but just noticed you asked an additional question.

 

The orbits are perfect circles. Your pen makes it look off because of the coordinates you're using for the center of rotation tween.

 

Here's a fork of your pen in which I've added a circle with a green stroke. You can see that circle uses the exact center coordinate you're using in your tween and the orange circle follows it perfectly, but look how far it's off from your desired orbit path.

 

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

 

You can fix this with a small adjustment. 

// change this
.to($planets,10,{rotation:"-=360", svgOrigin: "473 532.5",ease: Power0.easeNone});

// to this
.to($planets,10,{rotation:"-=360", svgOrigin: "490 542.5",ease: Power0.easeNone});

If you drop in those new coordinates, your orange sphere rotates along the path correctly.

 

For things like this, I'd recommend starting with a perfectly square SVG and making sure the orbit path circles are perfectly centered. Actually if you'd leave them as circles instead of changing them to compound paths, they would be a lot easier to change on the fly.  

 

Happy tweening.

:)

  • Like 4
Link to comment
Share on other sites

Honestly, I was kind of tired when I was posting that answer and didn't want to dig through your SVG to find the orbit path so I just eyeballed it.  :D

 

To get the precise position and size of your path, you'd want to use:

// this will give you x, y, width and height
yourPath.getBBox(); 

Once you have that data, you can figure the center of the path with a little arithmetic. 

 

One of the best tips I can give anyone when creating SVGs is to create a rectangle the same size as your SVG before export. It's the first thing I do after deciding the size of a project. Drop that in, lock it and forget about it. After you export the SVG, you can delete that sizing rectangle. It is simply there to make sure your viewBox stays the same size as you intended when setting up the SVG.

 

Another little tip. If you want to get fancy with your orbits, you could group the text and circle together and rotate the group. At the same time, another tween then rotates the text in the opposite direction so all the text stays upright and readable. Here's a quick demo:

 

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

 

Happy tweening.

:)

  • Like 3
Link to comment
Share on other sites

Thanks a milion ! Nice eyeball work ;D

Great demo, that's very close to my planed result, thank you for the tip about the SVG, and once again for the overall help.

I'm going back to dig up some more info about the svgs, and to their core itself - https://sarasoueidan.com/blog/svg-coordinate-systems/ - thought I know quite a lot about them - I wasn't prepared ;)



 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...