Jump to content

Gennadiy Karachentsev

The circular motion of objects

Moderator Tag

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

Hi all!

I want to make animation as here http://css-tricks.co...ples/Circulate/, the bottom of the page, the flying balls.

But nothing happens. Tried Bezierplugin saddled with, but in the end there is a sharp transition is not smooth.


Maybe someone knows how to do, tell me please.

Here's an example of my code


var maxx = new TimelineMax({repeat:-1,delay:1});
maxx.to($('.b-circul1'), 1, {css:{x:400,y:20,scale:0.5},ease:Linear.easeNone});
maxx.to($('.b-circul1'), 1, {css:{x:800,y:0,scale:1},ease:Linear.easeNone});
maxx.to($('.b-circul1'), 1, {css:{x:400,y:-20,scale:1.5},ease:Linear.easeNone});
maxx.to($('.b-circul1'), 1, {css:{x:0,y:0,scale:1},ease:Linear.easeNone});

Link to comment
Share on other sites

Yes, I agree. But this method will not work in all browsers. I would like to cross-browser version.

Link to comment
Share on other sites

You could do something like this:



Notice that the tween that controls the y repeats and yoyos and has an ease on it so you get a closer simulation to elliptical motion than the code you were working with.


We are working on porting our ActionScript MotionPath API to javascript which will make this MUCH easier in the near future.


Here are 2 swf examples: http://www.snorkl.tv/2011/11/as3-code-challenge-orbital/

Here is the current actionscript documentation: http://api.greensock.com/as/com/greensock/motionPaths/CirclePath2D.html


Although it is possible to create an elliptical path with cubic Bezier curves (supported by the BezierPlugin) generating the control and anchor points is a non-trivial affair. Creating the coordinates for each quadrant of a circle is explained here: http://hansmuller-flex.blogspot.com/2011/04/approximating-circular-arc-with-cubic.html


There are some other resources available here


Using transformOrigin with elements in 3D space is really going to be the most accurate approach for now, but of course browser support will be limited.


Keep you eyes open, we are certainly working on tools to make this type of animation much easier.

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