Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Sign in to follow this  
phillip_vale

Greensock HTML5: Stopping repeating animation

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


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
Link to post
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:

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

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

 

Cheers

Petr

Link to post
Share on other sites

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 post
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 post
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 post
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
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×