Antonio78 Posted April 20, 2021 Share Posted April 20, 2021 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 More sharing options...
Solution GreenSock Posted April 21, 2021 Solution Share Posted April 21, 2021 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? 1 Link to comment Share on other sites More sharing options...
Antonio78 Posted April 21, 2021 Author Share Posted April 21, 2021 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 More sharing options...
GreenSock Posted April 21, 2021 Share Posted April 21, 2021 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now