Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Pause before loop.

Go to solution Solved by Carl,

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



Trying have the last animation sit for 0.5s before it restarts. Tried a few things that are commented out. Dug around a bit with no luck. 

window.onload = function() {
  var logo = document.getElementById("logo")
   //   tweenBtn = document.getElementById("tweenBtn");
	//var tl = new TimelineMax({repeat:-1}) 
  var tl = new TimelineMax({repeat:-1}) 
		//logo will animate 100px to the right of its current position
		tl.to(logo, 0.5, {left:"+=100px"})
       .to(logo, 0.5, {left:"+=100px"},"+=0.5")
       .to(logo, 0.5, {left:"+=100px"},"+=0.5")
       .to(logo, 0.5, {left:"+=100px"},"+=0.5")
      /* Delay Fails */ 
     //  .delay("+=0.5");
     //   .pause(0.5, false);
     // .delayedCall(0.5, function() {  tween.resume();});

Thanks for your help. 

See the Pen stacI by rgfx (@rgfx) on CodePen

Link to comment
Share on other sites

  • Solution

Will a repeatDelay work for you?

  var tl = new TimelineMax({repeat:-1, repeatDelay:1}) 
  • Like 2
Link to comment
Share on other sites

A delay is the amount of time that transpires before a timeline plays. 

The repeatDelay is the amount of time the transipres between the time it ends and the time it repeats.


If you want to go another route and add "dead time" to the end of the timeline, you can add a dummy tween at any tween. The most convenient way is using a set() with an empty target, and no vars like so


tl.to(logo, 0.5, {left:"+=100px"})
       .to(logo, 0.5, {left:"+=100px"},"+=0.5")
       .to(logo, 0.5, {left:"+=100px"},"+=0.5")
       .to(logo, 0.5, {left:"+=100px"},"+=0.5")

//2 seconds later add a dummy set to add dead time

     .set({}, {}, "+=2")

I see you edited your response and the repeatDelay works. cool

  • Like 2
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.