Slow Motion Effect, not the ease, need some help

[joshdickens]

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.

 

Thanks,

Josh

[GreenSock]

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)