Jump to content


stop animation of an object on a bezier line with easing

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



I've got an animation of some objects looping through a bezier using the BezierPlugin. I want to fire a function to make the objects stop with an ease, wherever they are but along the bezier curve. Imagine a racetrack and there's suddenly a red flag, all the cars need to come to a halt all of a sudden. How would I go about that?


I tried overwriting the tween but it just stops. 


Another question as well on how the bezier the plugin draws, how can I make it not start drawing the bezier from x:0 y:0. Say I want it to start on the middle of the stage instead.



Link to comment
Share on other sites



If each element has an individual tween is quite easy, you can tween the instance time scale to 0 with an ease:

var tn1 = TweenMax.to(element, time, {bezier:{vars}});

//to stop the element
TweenLite.to(tn1, time, {timeScale:0, ease:Power3.easeOut});

And to restart the tween you can use the same but with 1 or just set the time scale to 1:

//progressively restart the animation
TweenLite.to(tn1, time, {timeScale:1});

//restart at normal speed immediately

If you're using a timeline and want all the elements to stop in the same way, just use your timeline instance instead of an individual tween instance.


Hope this helps,



Link to comment
Share on other sites

One of the coolest features of the platform is that you can tween methods of tweens (huh?) which makes effects like this super simple.


Every animation has a timeScale() which controls its playback speed. You can set timeScale(0) to prevent an animation from progressing and you can also tween the timeScale of a tween so that you have the gradual slow down of an animation. 


You can tween the timeScale() of a tween like this

//animate the timeScale() of someTween to 0 over the course of 1 second
TweenLite.to(someTween, 1, {timeScale:0})//

You can see it in action with a Bezier tween here: http://codepen.io/GreenSock/pen/LuIJj




For the second part of your question. The coordinates you provide to the BezierPlugin are within the same coordinate space as the target of the tween. If you want to offset the start point of your curve, the easiest thing may be to nest the target of your animation inside another element that is positioned where you want it to start.






  • Like 1
Link to comment
Share on other sites

Brilliant guys, i tried the timescale, but i missed the point of adding an easing to it (duh!). As for the second question, thanks a lot for the pointer!

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.