set delay to TimelineLite?

[Vincentccw]

How do I set animation delay to using timelineLine?

 

I have an animation that store inside slideUpTemplate instance

 

/*========================================*/

var slideUpTemplate = new TimelineLite({

paused:true,

onComplete:animationComplete,

onReverseComplete:animationCompleteRev

});

/*========================================*/

 

I've an button that will hover in and out event attached to it, and call slideUpTemplate.play() and slideUpTemplate.reverse() respectively.

 

My problem is when I hover out I want the animation to delay for 1second before triggering the slideUpTemplate.reverse() method.

 

My initial thought was to use slideUpTemplate.delay(1).reverse() but it only works for the 1st time.....

[Chrysto]

Hi, it would be really great if you create a codepen example. 

One thing I could suggest you is to use TweenLite delayedCall method.

$(element).on("mouseenter", function(){
    TweenLite.delayedCall(1, function(){
       slideUpTemplate.reverse();
    });
​});

[Carl]

Yeah, without seeing an example it sounds like Chrysto's advice is best.

 

You can't tell a timeline to wait to reverse, but you can wait to tell it to reverse.

DelayedCall() simply waits a set amount of time before calling a function.