Greensock HTML5: Stopping repeating animation

[phillip_vale 3 Likes (Newbie)]

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();


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


chassis.pause();
tyre.pause();
</script>

Thanks in advance,

 

Phil

[Ihatetomatoes 327 Likes (Leader)]

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:

chassis.pause();
tyre.pause();

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

 

Cheers

Petr

[Ihatetomatoes 327 Likes (Leader)]

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.

[phillip_vale 3 Likes (Newbie)]

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.

[Ihatetomatoes 327 Likes (Leader)]

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?