Jump to content


Greensock HTML5: Stopping repeating animation

Moderator Tag
Go to solution Solved by Ihatetomatoes,

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 there,


I am trying to animate a car moving along a road and need the wheels rotation and the chassis bouncing to stop as the road runs out.


It's not looking too bad except that i can't get the chassis and tyre vars to finish after the rest of the timeline finishes.


The code below simply pauses everything from the start.


Sorry if the answer is obvious...

<script type="text/javascript">
var chassis = new TweenMax.to ("#chassis", .1, {top:1, yoyo:true, repeat:-1})
var tyre = new TweenMax.to ("#tyre", .5, {rotation:360, transformOrigin:"50% 50%", repeat:-1, ease:Linear.easeNone})

var tl = new TimelineMax();

.from("#suv", 8, {left:20, ease:Elastic.easeInOut}, "start")
.from("#shop", 6, {left:1456}, "start")
.to("#road", 6, {left:-1456}, "start")


Thanks in advance,

Link to comment
Share on other sites

Hey Phil, it would be great if you could show your code on CodePen, but from the code you've posted it is obvious why the animation is paused at the start.


Remove these two lines:


You can add your chassis and tyre tweens to the main timeline.




Link to comment
Share on other sites

  • Solution

And if you want to stop the repeating tweens at a certain point, you can add onComplete callback function to the tween that should stop it. Eg.:

tl.to("#road", 6, {left:-1456, onComplete: stopFunction}, "start");

function stopFunction(){
//stop some other tweens

Hope that helps.

  • Like 4
Link to comment
Share on other sites

Amazing, thanks ihatetomatoes! I was after the second answer! I have now written a startFunction as well so I can get the car going again. :)

Link to comment
Share on other sites

You're welcome Phil, I am happy to help whenever I can. Good luck with your project.


Will you share the final project with us?

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.