Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
tr309

Tween around circle

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

Is it possible to use TweenMax/Lite to animate objects around a circle? I can do this with regular Javascript but my results are not very smooth. Basically, I'm trying to replicate something similar to this:

 

http://fff.cmiscm.com/#!/main

 

Many thanks,

 

Rich

Link to comment
Share on other sites

Hi and welcome to the forums.

 

The site you reference is quite amazing and not the easiest thing to achieve, but not the hardest either and if you work hard it can be achieved with GSAP.

 

Now in terms of achieving a circular tween the best way I recommend would be with the bezier plugin, you can do it with any of the types the plugin has, like this:

/*SIMPLE BEZIER*/
TweenMax.to(div1, 1, {bezier:[{x:100, y:100}, {x:0, y:200}, {x:-100, y:100}, {x:0, y:0}], ease:Linear.easeNone});

/*QUADRATIC BEZIER*/
TweenMax.to(div1, 1, {bezier:{type:'quadratic', values:[/*p1*/{x:0, y:0},{x:100, y:0},{x:100, y:100},  /*p2*/{x:100, y:200},{x:0, y:200},  /*p3*/{x:-100, y:200},{x:-100, y:100},  /*p4*/{x:-100, y:0},{x:0, y:0}]}/*bezier end*/, ease:Linear.easeNone});

The reason for throwing both (simple and quadratic) is because with canvas you can preview how a quadratic curve would look like, giving you a glimpse of the path your element will go through.

 

Another way to preview the paths of a bezier is the pen of the Greensock collection that allows you to see the path, you can play with it and use a TweenMax.set in order to see  an immediate render of the path instead of waiting, you can see it here:

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

 

I've set up a pen to illustrate a circular tween:

See the Pen kjmDo by rhernando (@rhernando) on CodePen

 

Is not the complete thing but I hope it helps you getting on your way.

 

Cheers,

Rodrigo.

  • Like 2
Link to comment
Share on other sites

Rodrigo's idea is great. I think you can get it perfectly circular with a Cubic Bezeier, but it can be a little bit of a task to set all the control points and anchor points. I haven't had time to try it yet.

 

Another way to get circular motion is to offset the transformOrigin like so:

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

  • Like 1
Link to comment
Share on other sites

Hi,

 

I modified the pen in order to compare the different beziers in it with the curves generated. I can't though draw the simpler curve because I don't know the math in it and what the resulting points are and I didn't exported the code of greensock's pen, so the tween is compared with the quadratic curve and a full circle.

 

Also I added another tween with simple bezier and curviness which approaches very well to the full circle.

 

Is the same address:

See the Pen kjmDo by rhernando (@rhernando) on CodePen

 

Cheers,

Rodrigo.

  • Like 1
Link to comment
Share on other sites

Nice job, Rodrigo. The new circle looks really good with curviness:1.5.

Link to comment
Share on other sites

Rodrigo.. so the 4 points specified with bezier define the circle and the type of bezier dictates the curve arc? That's very cool.

 

It looks like I'd have to calculate the 4 bezier coordinates each time I wanted my items to move. Is there a way to use the bezier curve to step along the circle only a little bit? E.g. if the user drags the mouse to the right, the items on the circle should only move during the drag and then stop when the user stops dragging.

 

Carl I like your approach too. The way I've got my anim working at the moment is without GSAP and I'm calculating the circle coords with Sin/Cos but the performance isn't great.

 

Thanks guys. I'm going to investigate both methods today. I'll post some links when I've got this online.

Link to comment
Share on other sites

At some point, our CirclePath2D and other Motion Path tools will be released for JavaScript which will make this sort of thing much easier.  See the AS3 docs for reference:

 

http://api.greensock.com/as/com/greensock/motionPaths/CirclePath2D.html

 

Here is a little Flash example of an object moving around a circle that changes size:

http://www.snorkl.tv/2011/11/orbital-challenge-solution/

 

 

If you use the BezierPlugin for your circular motion, you can still change the progress() (if using TweenMax) or time() of that tween as you drag. You will just have to convert the distance dragged to the proper value, very much like a jQuery UI Slider is used to control the progress of a timeline like the example here:

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

Link to comment
Share on other sites

Hi,

 

I forked part of Greensock's pen and created a simple circular disposition of the elements inside a container. Then the container is rotated using a simple tween. You can see it here:

See the Pen vloIj by rhernando (@rhernando) on CodePen

 

The only downside of it is the orientation of each element, since the container is rotating all the elements are rotating as well, so when the tween's progress is 0.5 (halfway) everything is upside down :mrgreen:, so in order to apply this you should probably get the container's current angle with an onUpdate call and apply it negatively to each element, or using also an onUpdate set the elements rotation to 0.

 

More experimentation is needed indeed, but I hope this helps you a little.

 

EDIT:

The element's arrangement was a lot easier than i thought, just set the individual angles based on the amount of elements and then subtract 90, because the first element is on the left side of the circle at minus 90 degrees position. Codepen updated.

 

Cheers,

Rodrigo

Link to comment
Share on other sites

Carl.. I was desperately searching for CirclePath2D and then realised it wasn't in the GSAP.js. I look forward to it.

 

Here's what I've got so far using transformOrigin on my elements to position around the circle:

 

http://jsfiddle.net/Lnr6s/9/

 

The dragging functionality is a bit buggy i.e. it gets stuck sometimes so I may ditch the jquery.swipe and just use raw JS. This is very close to what I want although the performance on my mobile device is poor. Might be a jsFiddle problem I'm not sure. I'll run some further tests.

Link to comment
Share on other sites

  • 8 years later...

Hi guys,

 

this a very old topic, now bezier is motionpath, tweenmax is gsap... and I can't figure out how to translate all this to gsap 3 😶

 

What I try to do is this, I would like to make an intro animation and make the outer circles come one by one from behind the compas,

that should be OK if I could place everything in a circle first, as I don't know the final size of the animation it should be responsive.

demo.jpg.18fdd58e6ee8c153470908f3b4728919.jpg

 

I did a pen but as soon as I uncomment "location" var everything goes blanc "(index):7376 crbug/1173575, non-JS module files deprecated."

See the Pen qBjraYz by fripi (@fripi) on CodePen

 

Any idea ?

Link to comment
Share on other sites

Location is a reserved word in JS so you can't use it - if you change it to position it works fine.

https://www.techonthenet.com/js/reserved_words.php (the link says php for some reason but it is for JS)

You're also looping around and setting the positions of all the circles to the same number here?

let myCircle = [
  { x: 100, y: -100 },
  { x: 200, y: 0 },
  { x: 100, y: 100 },
  { x: 0, y: 0 },
  { x: 100, y: -100 }
];
location = {x:myCircle[0].x,y:myCircle[0].y},

for(i = 0; i < amount; i++) {
 gsap.set(document.getElementById("c")+i, {x:location.x,y:location.y + 100});
}


I assume you want to do something like this instead?
 

let myCircle = [
  { x: 100, y: -100 },
  { x: 200, y: 0 },
  { x: 100, y: 100 },
  { x: 0, y: 0 },
  { x: 100, y: -100 }
];
  
circles.forEach((circle, i) => {
  gsap.to(circle, {
    x: myCircle[i].x,
    y: myCircle[i].y,
  });
});


Positions in your array will need to be tweaked
 

See the Pen NWgpbbz?editors=0010 by GreenSock (@GreenSock) on CodePen

 

  • Like 3
Link to comment
Share on other sites

Thank you, but the array was a bezier curve, and the circles where positioning on it

Link to comment
Share on other sites

Do you have a demo of the animation effect you want? I'm having a difficult time understanding what you want here, sorry. You probably don't even need a motion path or bezier - maybe you could just offset the transformOrigin and animate the rotation. You could put each one in a container <div> that you then counter-rotate in the opposite direction to keep the elements oriented upward the whole time. 

Link to comment
Share on other sites

no I think I don't need a bezier here, I need to place several divs around one central element, but they don't need to turn around, 

now I'm searchin for the math behind placing elements on a circle, rotation isn't a good option because the content must remain readable and horizontal.

The screenshot in my first post shows what I try to do

Link to comment
Share on other sites

This is more like it... I found a formula, it's not perfect yet, external circles aren't perfectly aligned to central one

also their distance to the center isn't "responsive"

 

See the Pen NWgpggK by fripi (@fripi) on CodePen

Link to comment
Share on other sites

If you need it to be responsive - I would potentially recreate this with SVG - Nice and easy.

I'll happily put together a little example a bit later for you if it would help?

Link to comment
Share on other sites

This demo here is from one of my lessons. It uses one of the technique's @GreenSock suggested. I create a circleHolder (red line) and put a circle inside it to the right. I then rotate the circleHolder and counter-rotate the child circle (using negative rotation of the parent).

 

See the Pen MWopvBX?editors=0010 by snorkltv (@snorkltv) on CodePen

 

You could edit the css of course to hide the red lines.

 

From there we build this nice ferris wheel ;)

 

See the Pen qBRwvgp by snorkltv (@snorkltv) on CodePen

 

For easy responsiveness, @Cassie is correct, SVG would be the way to go!

 

  • Like 5
Link to comment
Share on other sites

WOW thank you all, I'll study all those codes the coming days, it goes much deeper than what I need but always interesting to learn some tricks

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

×