Jump to content
GreenSock

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

Delay reverse Timeline

Recommended Posts

Hello,

I am have a simple animation that hides and shows the navigation. I made this into a TimelineMax sequence where on mouseenter it plays the time line, and on mouseleave it reverses the time line.

 

With out setting a timer for 2 seconds, how can I delay the start of the reverse when the user rolls off?

 

Here is what I currently have.

var navTL = new TimelineMax();
  navTL.to( $navMenu, 2, { alpha : 1, left : 0, ease : Strong.easeOut }, 'start' )
      .staggerTo( $navMenu.find( '.top-btn' ), 1, { alpha : 1 }, 0.2, 'start' );
  navTL.pause();

  $navArea.on( 'mouseenter',function ( e ){
    navTL.timeScale( 1 ).play();
  } ).on( 'mouseleave', function (){
    navTL.timeScale( 3 ).reverse();
  } ); 

I tried adding things like

 

navTL.delay( 2 ); to the mouse leave function

 

And tried adding a repeat delay to the time line its self. But since I am not yoyo-ing that doesn't really come into play.

I am looking for a GSAP solution to this. I can make a settimeout function but I don't think that is the cleanest way.

 

Thanks in advance for your help.

Jermbo

 

Link to post
Share on other sites

Hello Jermbo, and Welcome to the GreenSock Forum!

 

Have you tried to chain the delay .. for example like:

navTL.delay(2).timeScale( 3 ).reverse();

Or using delayedCall(): Provides a simple way to call a function after a set amount of time (or frames).

$navArea.on( 'mouseenter',function ( e ){
    navTL.timeScale(1).play();
}).on( 'mouseleave', function (){
    TweenMax.delayedCall(1, function(){    
       navTL.timeScale(3).reverse();    
    });    
}); 

Also to better help you .. if you setup a limited codepen demo example it will be really helpful so we can test your code in a live editable environment.

 

Here is nice video tut by GreenSock on how to create a codepen demo example. We love code we can test and edit live :)

 

Does that help?

Link to post
Share on other sites

Thank you!

 

I did try to do the delay() in different spots and this does not solve my problem. I used the delayedCall for the win!

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

  • Recently Browsing   0 members

    No registered users viewing this page.

×