Jump to content
Search Community

Delay reverse Timeline

jermbo test
Moderator Tag

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

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 comment
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?

  • Like 1
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.
×
×
  • Create New...