Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Gennadiy Karachentsev

The circular motion of objects

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});

Share this post


Link to post
Share on other sites

I think this can be achieved nicely with the new css3 properties of tweenmax/lite like transformOrigin

 

You can check some of the examples here: http://www.greensock.com/css3/

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

You could do something like this:

http://jsfiddle.net/geekambassador/HuxnZ/

 

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

Share this post


Link to post
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

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. 


  • Recently Browsing   0 members

    No registered users viewing this page.

×