Jump to content


Motion path with rotation

Recommended Posts



I'm having a play with TweenMax creating a solar system in which as you would expect the planets orbit the sun and rotate on their own axis as they do this.


Having each of the planets orbit the sun is the easy bit and works exactly as I want but i'm trying to come up with an elegant way of having each planet rotate a set amount of times on it's own axis during it's journey around the sun (the speed of each rotation would be determined by the amount of time given for the orbit). e.g. The Earth rotates on it's own axis 365 times (approx) per orbit of the sun. Is it possible to achieve something like this using TweenMax?


Hope this makes sense :)

var orbitalPath:CirclePath2D = new CirclePath2D(320, theSun.y, currentTarget.distanceFromSun);

var pathFollower:PathFollower = orbitalPath.addFollower(currentTarget, orbitalPath.angleToProgress(currentTarget.rotation), true);

TweenMax.to(pathFollower, (currentTarget.orbitalPeriod *100), {progress:orbitalPath.followerTween(pathFollower, 360, Direction.CLOCKWISE), repeat:-1, ease:Linear.easeNone});
TweenMax.to(currentTarget, 5, {rotation:360, repeat:-1, ease:Linear.easeNone});
Link to comment
Share on other sites

HI and welcome to the GreenSock forums.


Not really sure, but it sounds like you may need to have currentTarget follow the path, and have a child inside currentTarget that you rotate separately, sort of like:

TweenMax.to(currentTarget.globe, 5, {rotation:360, repeat:-1, ease:Linear.easeNone});
Link to comment
Share on other sites



I hope my question made sense (it was a bit difficult to explain).


Putting .globe after currentTarget gives me the following error: TypeError: Error #1009: Cannot access a property or method of a null object reference.


What I'm trying to accomplish is having an object follow a path (which I've done) but also make that object rotate on it's own axis a set number of times (the amount of times it rotates will control the speed in which each rotation must be done).

Link to comment
Share on other sites

I was suggesting that you nest the content of currentTarget inside a clip called globe so that you could rotate globe independent of the currentTarget following the path.

Link to comment
Share on other sites

here is some code and an Flash CC 2014 fla



import com.greensock.*;
import com.greensock.plugins.*;
import com.greensock.motionPaths.*;
var circle:CirclePath2D = new CirclePath2D(150, 150, 100);

TweenLite.to(mc, 6, {circlePath2D:{path:circle, startAngle:0, endAngle:360, direction:Direction.COUNTER_CLOCKWISE, extraRevolutions:1}});
TweenLite.to(mc.globe, 6, {rotation:360});




  • Like 1
Link to comment
Share on other sites



Thank you for your time on this


That seems to do then trick with a few minor tweaks :)

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.