Insert a sleep in TimelineMax

[KnowledgeFactory]

Hey guys.

I have following code

var tl = new TimelineLite({onUpdate: updateSlider, onStart: playAudio});
var Cursor = $("#cursor");

tl.timeScale(1);
tl.to(Cursor, 3, { left: x(90.7),top: y(23.8), ease: Power0.easeNone}); //first cursor movement

//2 second sleep/wait <=======

tl.call(function(){ $("#screen").attr("src", "images/video_001.jpg"); }); //change image
tl.to(Cursor, 1, { left: x(72.5),top: y(18.8), ease: Power0.easeNone});
tl.pause();

is it possible to insert a 2 second sleep between the first cursor movement and the call to change the image?

[Diaco]

Hi KnowledgeFactory 

 

pls try like this :

var tl = new TimelineLite();
tl.to(".red",1,{x:100})
  .add(function(){ console.log(" Hi  ") } , '+=2' )  // or .call( yourFunction , null , null , "+=2" )
  .to(".blue",1,{x:100})

[KnowledgeFactory]

Many thanks Diaco

[Rodrigo]

Hi and welcome to the GreenSock forums.

 

Besides Diaco's solution (which it'll work great) you can  add a dummy Tween in your timeline, like this:

tl
  .to(Cursor, 3, { left: x(90.7),top: y(23.8), ease: Power0.easeNone}) //first cursor movement
//2 second sleep/wait <=======
  .to({},2,{})
  .call(function(){ $("#screen").attr("src", "images/video_001.jpg"); }); //change image 

Like that you'll have a two second wait between your instances.

 

Although the most powerful and flexible way is the Position Parameter. The position parameter allows you to shift the time of an instance to any point in the timeline, whether is an absolute time in it or relative to the previous instance or a specific label. In your case it would be like this:

tl
  .to(Cursor, 3, { left: x(90.7),top: y(23.8), ease: Power0.easeNone}) //first cursor movement
  .call(function(){ $("#screen").attr("src", "images/video_001.jpg"); }, "+=2"); //change image

Notice the string "+=2" at the end of the call instance?. That tells GSAP to insert a pause of two seconds at the end of the timeline, which at the time when the call instance is added to it, is the end of the first cursor tween.

 

For more info on this check the timeline methods info on the docs:

 

http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/to/

 

And finally watch this videos Professor Carl made:

 

http://greensock.com/position-parameter

 

http://greensock.com/sequence-video

 

If you have more questions, please don't hesitate to ask.

 

Happy Tweening!!

[KnowledgeFactory]

Thanks for that tip.

/*ANIMATION/////////////////////////////////////////////////////////////////////////////////////*/
                tl.timeScale(1);
                tl.call(function(){ $("#screen").attr("src", "images/video_000.jpg"); });
                tl.to(Cursor, 3, { left: x(90.7),top: y(23.8), ease: Power0.easeNone});
                tl.call(function(){ $("#screen").attr("src", "images/video_000.jpg"); }, "+=2");
                tl.call(function(){ $("#screen").attr("src", "images/video_001.jpg"); });
                tl.to(Cursor, 1, { left: x(72.5),top: y(18.8), ease: Power0.easeNone});
                tl.call(function(){ $("#screen").attr("src", "images/video_001.jpg"); });
                tl.call(function(){ $("#screen").attr("src", "images/video_002.jpg"); }, "+=2");
                tl.to(Cursor, 1, { left: x(6.4),top: y(57.3), ease: Power0.easeNone});
                tl.call(function(){ $("#screen").attr("src", "images/video_002.jpg"); });
                tl.call(function(){ $("#screen").attr("src", "images/video_003.jpg"); }, "+=2");
                tl.to(Cursor, 1, { left: x(8.9),top: y(66.1), ease: Power0.easeNone});
                tl.call(function(){ $("#screen").attr("src", "images/video_003.jpg"); });
                tl.call(function(){ $("#screen").attr("src", "images/video_004.jpg"); }, "+=2");
                tl.to(Cursor, 1, { left: x(15.7),top: y(83.1), ease: Power0.easeNone});
                tl.call(function(){ $("#screen").attr("src", "images/video_004.jpg"); });
                tl.call(function(){ $("#screen").attr("src", "images/video_005.jpg"); }, "+=2");
                tl.to(Cursor, 1, { left: x(56.7),top: y(93.3), ease: Power0.easeNone});
                
                tl.pause();
             /*ANIMATION/////////////////////////////////////////////////////////////////////////////////////*/

I created my final animation. Unfortunately only the first gap is working.

 

By the way is there a better solution to switch the image as mine?

(The double image call was my approach to fix a bug when playing the animation backwards. The images changed after the cursor movement and not before so i called them twice. It is working now but it is a bit messy )

 

Sry for my terrible english

[Diaco]

pls check my first answer !

 

and pls check this out too : 

See the Pen waxNer by MAW (@MAW) on CodePen