Jump to content
Search Community

Orbit objects around central object...

cr33ksid3 test
Moderator Tag

Recommended Posts

So, I've viewed many different CodePens that already exist on the subject but still can't seem to get this one to work correctly. I created a simple CodePen in hopes that someone will be able to help me rotate or orbit the blue boxes and their content around the central "planet".  Possibly a bit more tricky in that the text contained in the box needs to remain horizontal.

 

This is the first stage. Once I have this stage working, I'd like to work on moving those same boxes like a revolver... where possibly the top box stops for a second, then moves to the second position and so on. For now, please help me get the blue boxes and their content to orbit the red planet.

 

There are IDs like the blue boxes "orbit1, orbit2... orbit8" and the red planet "planet"...

 

As you can see, the first ID "orbit1" rotates but not around the red planet. I don't, yet understand the code version I tried to use and how to set orbit1 to rotate around the center of the red planet.

See the Pen gOgwaxp by cr33ksid3 (@cr33ksid3) on CodePen

Link to comment
Share on other sites

 

Hello @cr33ksid3

 

You can set the point you want to rotate your orbit-groups around inside your SVG in GSAP via svgOrigin - since you want to rotate them around the center of your SVG and your SVG is 800x800 that would be a svgOrigin of ' 400 400'. Then you'd have to think about what would be neccessary for the square/rect itself to remain in position during that rotation of the whole group - and that would be to rotate it in the opposite direction for the same amount of time around it's own center, countering the overall rotation. To set the rotation around its own center you'd want to set the transformOrigin on that tween to something like "center center".

 

Does that make sense?

  • Like 5
Link to comment
Share on other sites

akapowl:

 

So, if you look at my original Codepen above I have added svgOrigin to the timeline and have part of the rotation based on the center of that red planet. Thank you. However, I couldn't figure out how to get the boxes to rotate the opposite direction and adding transformOrigin. As you can see in the Codepen... not quite working right.

 

mikel: thank you for the example. I will come back to this for the second phase and hopefully be able to figure out how that was done too.

 

Appreciate all the help as always...

Link to comment
Share on other sites

 

 

3 hours ago, cr33ksid3 said:

Once I have this stage working, I'd like to work on moving those same boxes like a revolver... where possibly the top box stops for a second, then moves to the second position and so on. For now, please help me get the blue boxes and their content to orbit the red planet.

 

To also address that part:

 

That can be done using a relative value like "+=45" / "-=45" for the rotation(s), decreasing the duration(s) of the tweens,adding a repeatDelay on the timeline and set repeatRefresh: true. This would make it rotate 45 degrees (in whatever direction specified) from where it ended in the repitition before.

 

Here's @PointC's codepen modified

 

See the Pen 67723ccaeb658bb3e60c848dcfa4bd15 by akapowl (@akapowl) on CodePen

 

  • Like 6
Link to comment
Share on other sites

 

@akapowl, @PointC:  Really cool!

 

Why not shorter ...

 

var tl = gsap.timeline({
  defaults: {
    duration: 0.5,
    ease: "none",
    repeat: -1,
    rotation: "+=45",
    transformOrigin: "center center",
    repeat: -1,
    repeatRefresh: true,
    repeatDelay: 0.5
  }
});
tl.to("#masterOrbit", {});
tl.to("#masterOrbit > g", {rotation: "-=45"}, 0);

An example for svgOrigin

 

See the Pen RwGYvzV?editors=1010 by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

  • Like 3
Link to comment
Share on other sites

Lots to thank you all for today. @PointC ... I see that you changed/added some CSS and then practically rewrote the JS to something much shorter... Thank you. @akapowl and @mikel ... thanks for both of your help today as well. It will take some time to dissect and figure out how/why you did what you did but this gives me a much better set of examples to work from. I don't see how you all keep all this straight though... Have a fantastic day!

  • Like 3
Link to comment
Share on other sites

13 minutes ago, cr33ksid3 said:

I see that you changed/added some CSS

I just added a group in the SVG as a parent to the individual groups so we could easily rotate in opposite directions.

 

14 minutes ago, cr33ksid3 said:

practically rewrote the JS to something much shorter

I plead guilty. 👨‍⚖️

 

I know in your other thread you expressed frustration at learning GSAP and JS all at once. I totally get that and admire your persistence. Keep at it a little bit each day and I assure you, it will all start to 'click'. That's really one of the cool things about hanging out here. You'll see lots of demos and different ways of writing code. There are almost always multiple routes to the same result in GSAP and JS in general. You'll get there if you keep at it. 

 

Let us know if we can help with any GSAP questions. Happy tweening and best of luck with your learning. :)

 

  • Like 2
Link to comment
Share on other sites

@PointC well... I learn something new everyday. I feel that I get great help here... but I still can't really go down each line of code, each parameter, etc... and pick out what everything is actually doing and why. I have been taking these examples and once I have them working... commenting in the code as to what everything does. I don't like "hacking" things together without really understanding how you came up with what you all did or why you all did it that way.

 

Since you asked though... in @akapowl 's example above he has more of a revolver feel. I like @mikel 's example too but we'll use the one akapowl put together. Every time that set of small boxes rotate, instead of moving the "tomato" colored box around the orbit, how can I highlight the very top box? Like you would having a bullet enter the chamber or fire? #masterOrbit group moves the whole group in the orbit but no one box is identified in the JS to change its color. Somehow I need to identify that top box to change its color. As it rotates it could be #orbit3 or #orbit4 or #orbit 5 in the rotation... if that makes any sense. Thanks again... and continued thanks for the encouragement.

Link to comment
Share on other sites

@mikel that looks great but I have tried to slow the rotation down by changing all the 0.5s down in the first timeline and that throws the time off with the highlight. I have tried adding a delay and/or repeatDelay to the second timeline parameters but the highlight cycles in the reverse direction at the same speed every time. I can't figure out how to slow that highlight to the same speed as the other rotation. What am I missing this time?

Link to comment
Share on other sites

@PointC that works for me. And it doesn't look like you changed the existing code on me much either so I can see what you did better. Thanks for the help. I will have to check out your tutorials as well sometime. When I have a better understanding of the basics of course...

  • Like 2
Link to comment
Share on other sites

34 minutes ago, cr33ksid3 said:

And it doesn't look like you changed the existing code on me much either

Ha. Nope - not this time. I just added that little function to change the circle fill at the end of each iteration.

 

34 minutes ago, cr33ksid3 said:

When I have a better understanding of the basics of course...

Our very own @Carl has tons of lessons to get you up to speed with the basics. If you get a chance, take a peek. He's an awesome teacher.

https://www.creativecodingclub.com/bundles/creative-coding-club

 

Happy tweening.

:)

 

  • Like 4
Link to comment
Share on other sites

Yep, have watched his GSAP 3 Express now twice... Working on the others and trying to put some projects together as well. Still can't soak enough in fast enough and get it to stick. Part of it shows in this thread. Each person who helps me has a different way of doing things... and they all kind of work. That is fantastic... Until someone like me who confuses easily when trying to learn and hack things together. Then I get a mix of things that work and there is always something broken. As I mentioned earlier, I don't just want to hack things together and get them to work... I want to understand why it works and how that person came up with that way of putting it all together. So, @Carl has been a big help... and I hope he is able to continue putting more tutorials/courses together. He explains everything in great detail I think. Great examples and slow enough for me to keep up. Same goes for all the learning on Greensock. Keep them coming and thank you. Tomorrow morning I am going to try and figure out how to change the grey text along with the highlighted circle too. I gave up tonight and have to work on some artwork... Thanks @PointC for the help.

  • Thanks 1
Link to comment
Share on other sites

Okay, good morning folks. I have been tinkering all night and part of this morning trying to get the text in the highlighted green circle to also change to white using @PointC 's solution. I had to make a change to part of the graphic for the project anyway so I organized my SVG a little better to accommodate. All the code still works as PointC had last created but some of the IDs changed. The hierarchy goes like this now...

    <g id="orbitGrp">
        <g id="orbit8">
            <circle id="circle8" fill="#BACF45" cx="123.6" cy="123.62" r="64.129"/>
            <g id="txt8">
                <path fill="#596774" d="

In the JS that PointC put together he has "const targets = gsap.utils.toArray("#orbitGrp circle");" but how would I create something like "const targets = gsap.utils.toArray("#orbitGrp path");" and only select all the path to fill with white?

 

I rearranged the SVG so that the whole orbit was grouped and inside that the circles were grouped with the text thinking this would help.

 

I also tried adding a class to all the paths (text that I want to change) and calling that by something like "const whiteTxt = gsap.utils.toArray("#orbitGrp .txt");" but couldn't get that to work either. I've been using console.log() to check and most attempts came up with undefined or errors.

 

I've probably been staring at this one too many times now.

 

Using PointC's code below... what is the easiest and most effective way to not only change the circle color but also the text color. The text was converted to curves...

 

Thanks in advance...

 

See the Pen 2b6a25e3acba2ec46cdc003e1a93d39d by cr33ksid3 (@cr33ksid3) on CodePen

 

Link to comment
Share on other sites

I don't know if it's the easiest way or the most effective, but one way could be to go with a forEach-loop in the checkCircle-function that checks on the index of the targeted textgroup and then sets the color to all paths contained within accordingly.

 

const targetsTextGroup = gsap.utils.toArray("#masterOrbit g").reverse();

...

function changeCircle() {  
  
  count++;
  
  gsap.set(targets, { fill: "#BACF45" }); 
  gsap.set(targets[count % targets.length], { fill: "tomato" });  
  
    
  targetsTextGroup.forEach((textGroup, i) => {
      
    const text = textGroup.querySelectorAll('path')         

    gsap.set(text, { fill: "#596774" });

    if( i === count % targets.length) {  
      gsap.set(text, { fill: "#FFFFFF" });
    }
    
  }); 
  
}

 

See the Pen 0a47d428d1e4b5aff183dedeab6ec9f3 by akapowl (@akapowl) on CodePen

  • Like 2
Link to comment
Share on other sites

@akapowl ... I see that it is working just fine on your pen. I added the bits of your JS that mine was missing. If you look back on my pen previous to your reply, you will see that something isn't quite right. The white text is out of sync... probably because your pen is an older version of mine and different. I've tried changing a few things to accommodate but it just kept coming back as out of sync. What am I missing?

Link to comment
Share on other sites

 

Ah, yes... my pen is a variation of @PointC's first version where the SVG seems to have been structured a bit different.

 

Just add nother g to the selector of the utils.toArray and you should be good. 

 

const targetsTextGroup = gsap.utils.toArray("#orbitGrp g g");

 

Is that better?

 

See the Pen 189b3264d110c7904930ead4fa8f3fd9 by akapowl (@akapowl) on CodePen

 

 

 

  • Like 3
Link to comment
Share on other sites

@akapowl ... that fixed it. Thank you. Now if I might ask... where do I learn more about how you came up with "gsap.utils.toArray("#orbitGrp g g");"? I'm familiar with arrays and know how to use them from other language experience. I am unfamiliar with the use of gsap.utils.toArray (probably in the GSAP docs) and how you knew how to take my SVG group ID #orbitGrp and break it down by g and g. I would never have known or even guessed to add another g to that. Is this just my lack of JS knowledge?

 

Thanks again to everyone. I think I can finally put this project to bed now. There is a lot of useful information in this thread. Lots of different approaches and solutions. I appreciate all the schooling ;-)

Link to comment
Share on other sites

Not to throw too much at you, but here's a slight modification. If you remove the presentation attribute fill on the individual paths in the text groups, you can then control all the fills at a group level. This is sometimes preferable for quick and easy changes via CSS or GSAP.

 

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

 

You could also leave all the text paths as actual SVG text. This also makes the SVG quite a bit easier to read and if the client wants to change a word on one of the circles, you don't have to go back to your vector software. Just my two cents though.

 

Happy tweening.

:)

 

PS More info about utils.toArry()
https://greensock.com/docs/v3/GSAP/UtilityMethods/toArray()

  • Like 4
Link to comment
Share on other sites

3 minutes ago, PointC said:

If you remove the presentation attribute fill on the individual paths in the text groups, you can then control all the fills at a group level

 

Oh well, I totally missed that point when I first tried to do exactly that - that's why I then went with the .forEach loop instead - thanks for pointing it out, now I will remember that for sure :D 

  • Like 3
Link to comment
Share on other sites

36 minutes ago, cr33ksid3 said:

Now if I might ask... where do I learn more about how you came up with "gsap.utils.toArray("#orbitGrp g g");"? I'm familiar with arrays and know how to use them from other language experience. I am unfamiliar with the use of gsap.utils.toArray (probably in the GSAP docs) and how you knew how to take my SVG group ID #orbitGrp and break it down by g and g. I would never have known or even guessed to add another g to that.

 

In the end it simply comes down to the strucure of the SVG.

 

In @PointC's first version the structure was

 

<g id="masterOrbit">

    <circle id="circle1" fill="#BACF45" cx="253" cy="70.022" r="64.129"/>
    <circle id="circle2" fill="#BACF45" cx="382.4" cy="123.622" r="64.129"/>
    <circle id="circle3" fill="#BACF45" cx="436" cy="253.021" r="64.129"/>
    <circle id="circle4" fill="#BACF45" cx="382.4" cy="382.421" r="64.129"/>
    <circle id="circle5" fill="#BACF45" cx="253" cy="436.021" r="64.129"/>
    <circle id="circle6" fill="#BACF45" cx="123.6" cy="382.423" r="64.129"/>
    <circle id="circle7" fill="#BACF45" cx="70" cy="253.021" r="64.129"/>
    <circle id="circle8" fill="#BACF45" cx="123.6" cy="123.62" r="64.129"/>

    <g id="txt1">...
     ...textpath
    </g>

   <g id="txt2">...
     ...textpath
   </g>

	...and so on for all other tetxts

</g> <!-- // end masterOrbit -->

 

So for creating the array of the textpath-groups it was enough to go down that one level - thus '#masterOrbit g' to select all groups inside of the master-group.

 

In your version however, the strucutre is

 

<g id="orbitGrp">
      
        <g id="orbit8">
            <circle id="circle8" fill="#BACF45" cx="123.6" cy="123.62" r="64.129"/>
            <g id="txt8">
				...textPath
            </g>
        </g>

        <g id="orbit7">
            <circle id="circle7" fill="#BACF45" cx="123.6" cy="123.62" r="64.129"/>
            <g id="txt7">
				...textPath
            </g>
        </g>

</g>

 

So the actual group that contains the relevant paths is nested one level deeper than in PointC's example - thus '#masterOrbit g g' to select all groups inside groups inside the orbitGrp-group.

 

Does that make sense?

 

 

  • Like 3
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...