Jump to content


Slow Motion Effect, not the ease, need some help

Recommended Posts

Hey folks, any help appreciated. :)


Example scenario:


I have fifty circles on screen each traveling to a different location (ex: circle1):


TweenMax.to(circle1, 2, {x: 500, y:700});


So all fifty are moving at a 2 second speed to their destinations. What I want to do is .5 seconds into their movement I want to insert an additional 3 seconds to slow down their speed and introduce a visual slow motion effect and then .5 seconds later return them to their original speed.




Link to comment
Share on other sites

TimelineLite would make this really easy. Are you familiar with it? http://greensock.com/timelinelite-as


You could drop your tweens into a TimelineLite instance, and then tween the timeScale of that TimelineLite to whatever you want, whenever you want. 

var tl:TimelineLite = new TimelineLite();
tl.to(circle1, 2, {x:500, y:700}, 0);
tl.to(circle2, 2, {x:300, y:600}, 0);
//then, slow it down:
TweenLite.to(tl, 0.5, {timeScale:0.25, delay:0.5});

//then speed it back up to normal speed:
TweenLite.to(tl, 0.5, {timeScale:1, delay:3});

Once you grasp the concept of TimelineLite and TimelineMax, it opens a whole new world. You can even nest timelines within timelines. Have fun!


Oh, and one more thing: are you aware that there's a SlowMo ease? It may do exactly what you're asking for. The docs are at http://greensock.com/asdocs/com/greensock/easing/SlowMo.html

TweenLite.to(circle1, 2, {x:500, y:700, ease:SlowMo.ease});

You can configure it too (see the docs)

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.