Creating an orbit path without target rotating

[Dylan Bozarth]

I am trying to create an orbit animation but without the object rotating with the path. It's very similar to what is on the front page of gsap (codepen is linked). I only need the objects to move in a circle around the center, but the GSAP example is beyond my ability to understand because of all the extra features of it. 
So far I've only been able to create things like this, however this rotates the object with the path. Could anyone help me? Thank you in advance. 
```
 

 gsap.to(".orbit-container7", {rotation: -360, ease: "linear",  repeat: Infinity, duration: 57})

See the Pen mdrmZYY by creativeocean (@creativeocean) on CodePen

[GreenSock]

It'd be super helpful if you could provide a minimal demo so we can see what you're trying in context. Is it SVG? Regular DOM elements? Do they need to counter-rotate so they don't pivot? 

 

One strategy is to set the transformOrigin to something that's outside the bounds of the element. Like "500px center" for example. And then just animate the rotation. But if you don't want it to pivot, you can wrap it in another element so you can animate its rotation in the opposite direction at the same time. 

[Dylan Bozarth]

10 hours ago, GreenSock said:

It'd be super helpful if you could provide a minimal demo so we can see what you're trying in context. Is it SVG? Regular DOM elements? Do they need to counter-rotate so they don't pivot? 

 

One strategy is to set the transformOrigin to something that's outside the bounds of the element. Like "500px center" for example. And then just animate the rotation. But if you don't want it to pivot, you can wrap it in another element so you can animate its rotation in the opposite direction at the same time. 

Hello and thank you for replying, sorry that I didn't include this outright. I am animating regular dom elements, it's part of a much larger project so I can't use codepen, but I have a codesandbox here that you can view it https://codesandbox.io/s/fervent-leavitt-1lhrr?file=/src/systems/generatesystem.js
" Do they need to counter-rotate so they don't pivot? ", I don't think so, I just need them to stay facing up like the react/angular logos in the greensock example from the first post 
 

[Cassie]

Heya Dylan!

I'd suggest making a codepen that only contains the specific gsap technique you're struggling with. It's not just easier for other people to help, but it can often help to get your own head around the task at hand.
e.g. If you're trying to understand how to animate a DOM element along a path, all you need in the minimal demo is a DOM element and a path.

Anyway - this is a great thread with loads of options. -
 

If you're using GSAP's motionPathPlugin you're likely going to want to set the autoRotate value to false so that the element doesn't rotate while moving along the path.

 

Good luck!

[GreenSock]

A motion path could be an excellent solution. And to be clear, here's the technique I was referencing that doesn't involve a motion path: 

See the Pen 82086f7979fa2cee2a1b42f5a427ef68?editors=0110 by GreenSock (@GreenSock) on CodePen

[Dylan Bozarth]

On 6/28/2021 at 11:23 AM, GreenSock said:

A motion path could be an excellent solution. And to be clear, here's the technique I was referencing that doesn't involve a motion path: 

 

 

Thank you for this example. I've been toying with it for a few days and I've noticed some odd behavior. I am trying to use this on a reusable component. The problem is I cannot get the component to follow this path. I try your example with just a simple div element and it works fine, but when it loses the functionality that the component would bring to it. When I use it on the component the div will rotate the way that brought me here in the first place. 
I managed to put all of the affected code in the same file, and I added words to the planets so others can better understand their positions without having the texture files.  You can view it all here on codesandbox. I thank you all for your continued assistance. 
https://codesandbox.io/s/elated-black-qzu79?file=/src/systems/sol/solsystem.js


 

[GreenSock]

53 minutes ago, Dylan Bozarth said:

When I use it on the component the div will rotate the way that brought me here in the first place. 

I don't understand what you mean. 

 

You seem to have a bunch of animation code that is targeting elements using class names that aren't applied to any elements. If you're creating components, you might want to use the new gsap.utils.selector() utility function to scope things. 

 

Minor note: there's no repeat: Infinity, it should be -1.

[Dylan Bozarth]

10 hours ago, GreenSock said:

I don't understand what you mean. 

 

You seem to have a bunch of animation code that is targeting elements using class names that aren't applied to any elements. If you're creating components, you might want to use the new gsap.utils.selector() utility function to scope things. 

 

Minor note: there's no repeat: Infinity, it should be -1.

Sorry that I wasn't clear. I mean that if I try and get the component to orbit around in the circle, it will also rotate while orbiting and that was my original problem. 
And for the rest of the classes that  aren't applied, I am going to finish them later after I get a perfect orbit animation for just one of the objects. After that I will take the solution and apply it to the rest of the elements. 
For the  gsap.utils.selector(), I am not sure how that would work. At the moment the components are generating just fine and I'm selecting them after they are generated. 
I updated the codepen and removed all of the excess code and added more comments. I really appreciate your continued assistance. 

[GreenSock]

If I understand you correctly, the issue is that you're not animating the correct thing. You've got the word "Mercury" in an <a> and then INSIDE that you've got another .miniPlanet <div> and inside that you've got ANOTHER <div> with a class of mercuryMini that's totally empty, and THAT is the thing you're applying the counter-rotation to. 

[Dylan Bozarth]

11 hours ago, GreenSock said:

If I understand you correctly, the issue is that you're not animating the correct thing. You've got the word "Mercury" in an <a> and then INSIDE that you've got another .miniPlanet <div> and inside that you've got ANOTHER <div> with a class of mercuryMini that's totally empty, and THAT is the thing you're applying the counter-rotation to. 

I think you are right. This might be the issue, I've started experimenting and I've made some progress, thank you for your help. I'll continue tinkering with it and post my solution here when I find it