Jump to content
Search Community

Time concatenating at the end of reverse animations?

derp 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

Hi!

 

I'm having issues when reversing animations. I have a timeline which is used to show menu items. It is coupled with other animations and functions, but the issue only lies within this tween.

 

When I play the animation the first time it's perfect. I reverse the animation, its fine. When I go to play it again, the delay between when the modalBG_cover shows, and the menu_anim seems to double, and this scales to the point where I could be waiting for some time for the second animation to start.

 

Is there somewhere I can reference a solution? I'm not sure exactly what to look for in this case! My approach may be completely wrong, but this should be bread and butter stuff! 

 

Thanks


    var menu = document.getElementById( "menu" );
    var modalBG_cover = document.getElementById("modalBG");

    var menu_anim = new TimelineMax( { paused:true } );
        menu_anim.to( menu, 1, { display: 'block' }, "-=1.8");
        menu_anim.staggerTo( "#menu ul li a", 0.5, {opacity:1, top: 0, ease:Back.easeIn}, 0.05);
 
 
 
var modalBG_show = new TimelineMax( { paused:true } );
modalBG_show.to( modalBG_cover, 1, { height: '100%' });
 

function menu_toggle( stunner ){

var target = document.getElementById("modalBG");

if ( target.classList.contains( 'open' ) ) {

target.classList.remove( 'open' );

modalBG_show.reverse();

} else {

target.classList.add( 'open' );

menu_anim.play();

}

}

 
 
Link to comment
Share on other sites

Hi derp  :)

 

pls fix by this :

 

var menu_anim = new TimelineMax( { paused:true } );
menu_anim.staggerTo( "#menu ul li a", 0.5, {opacity:1, top: 0, ease:Back.easeIn}, 0.05);
 

btw , you can use just one Timeline with position parameter adjustment :

 

var tl = new TimelineMax( { paused:true } );
tl.staggerTo( "#menu ul li a", 0.5, {opacity:1, top: 0, ease:Back.easeIn}, 0.05)
  .to( modalBG_cover, 1, { height: '100%' },0);

and 2 points :

- " display " isn't tweenable property 

- don't use negative position parameter for first tween , you can use .set() to set immediately 

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