Jump to content
GreenSock

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

Animation not stopping at label

Go to solution Solved by GreenSock,

Recommended Posts

Hi,

I can't make this animation do what I want it to do, I can not understand why.

 

I have a button that calls function menuAnimation which plays my timeline, based on condition whether variable is_menu_active is true or false.

My problem is that the tween from START_MENU to PAUSE_MENU skips pointerEvents:all, does not stops at label ''pause_menu, then goes to the next step pointerEvents:none.

What is wrong with this code?

Thank you.

 

btn_menu.addEventListener('click', (e) => {
  e.preventDefault();
  menuAnimation();
});

var tl_menu_animation = gsap.timeline({
  defaults:{
    ease: "power2.inOut"
  },
  paused:true
});

tl_menu_animation.addLabel('start_menu')
  .set('#nav_left,#nav_right', {autoAlpha:1})
  .to('#nav_left,#nav_right', {duration:0.7, scaleX:1})
  .to(nav_elems, {duration:0.4, autoAlpha:1})
  .set('#navigation', {'pointerEvents':'all'})
  .addLabel('pause_menu')
  .set('#navigation', {'pointerEvents':'none'})
  .to(nav_elems, {duration:0.2, autoAlpha:0})
  .to('#nav_left,#nav_right', {duration:0.4, autoAlpha:0})
  .set('#nav_left,#nav_right', {autoAlpha:0})
  .set('#nav_left,#nav_right', {scaleX:0})
  .addLabel('end_menu');


function menuAnimation() {
  if(is_menu_active) {
    tl_menu_animation.tweenFromTo('pause_menu', 'end_menu');
    is_menu_active = false;
  } else {
    tl_menu_animation.tweenFromTo('start_menu', 'pause_menu');
    is_menu_active = true;
  }
}

 

Link to comment
Share on other sites

  • Solution

From my cursory glance, here's your problem: 

  .set('#navigation', {'pointerEvents':'all'})
  .addLabel('pause_menu')
  .set('#navigation', {'pointerEvents':'none'})

You've got two set() calls at EXACTLY the same spot on the timeline. There's literally no space whatsoever between them, so when you tween to that label, it lands on top of both, and the latter one "wins" (in the forward direction, though it's opposite if you're going backwards). 

 

One solution would be to just add some space between them, even if it's like 0.001 seconds (imperceptible)

  .set('#navigation', {'pointerEvents':'all'})
  .addLabel('pause_menu', "+=0.001")
  .set('#navigation', {'pointerEvents':'none'}, "+=0.002")

Does that clear things up? 

  • Like 1
Link to comment
Share on other sites

Your solution does not seem to solve my issue but it gave me a good hint.

I changed my code in this way

 

.to('#navigation', {duration:0.01, 'pointerEvents':'all'})
.addLabel('pause_menu')
.to('#navigation', {duration:0.01, 'pointerEvents':'none'})

This seems to work as I intended.

Thank you.

Link to comment
Share on other sites

Glad you got it working - sorry, I mistyped that second offset. The way I had it caused the label to be directly on top of the 2nd .set() call because labels don't take up any "space" in the timeline. I fixed that now.

  .set('#navigation', {'pointerEvents':'all'})
  .addLabel('pause_menu', "+=0.001")
  .set('#navigation', {'pointerEvents':'none'}, "+=0.002")

 

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.

×