Issue Vue + debounce + mouse enter/leave

[TerraHQ]

hey!
so I’m doing this little animation for this blue card where:
1) on mouseover I do a .5 duration initial animation
) on mouseleave I’ve got a different .25 duration animation.

All animations are triggered after hovering the Explore button at the bottom.
The mouseover and mouseleave event are naturally triggered so fast that I’m delaying all animations using debounce.
However, even if each method is triggered correctly (you can check the console messages), if you move the mouse very fast over the Explore button, even when you leave the button and the message says ‘mouseleave’, the animation is still on and bugged. The only way to solve this is if I’ve got 1 animation played and played on reverse or 2 animations but with the same duration.

Why is this bug?
Thanks in advance

See the Pen rNYEJMP?editors=0110 by elisabetperez (@elisabetperez) on CodePen

[elegantseagulls]

This could happening because every time you mouse over or out of the button, you are creating a new gsap timeline, and the wires are getting crossed because of that. You might consider setting up the timelines with paused: true outside of the mouse actions, and running tl.play() from inside. You may need to invalidate the timelines more here: https://greensock.com/docs/v3/GSAP/Tween/invalidate()

[mvaneijgen]

If I read you question correctly this tutorial exactly discribes your issue 

 

[TerraHQ]

hi @mvaneijgen The exitTime concept from the video is an interesting one but ideally I’d like to use 2 different animations instead of playing and reversing the same animation. 2 animations and 2 different timelines.

[OSUblake]

Here's a different approach to that problem.

 

See the Pen dyZBqzr by GreenSock (@GreenSock) on CodePen

 

Original thread...

 

 

[TerraHQ]

hey @OSUblake @mvaneijgen @elegantseagulls
Still working on this. 
My main goal is to have 2 complete diff animations.
I know that the user is not going to enter/leave super fast, but I want to accomplish the best experience if possible.

See the Pen gOoboZQ by elisabetperez (@elisabetperez) on CodePen

 

[OSUblake]

isHovering is supposed to be declared outside the function. It's not going to do anything the way you currently have it. Same with animation.

 

And you're probably going to need to use fromTo animations instead of from animations, or at clear the inline styles first.

[mvaneijgen]

@thunderfoot are you sure you have looked at the video I posted? Because as I see your video and I check the tutorial again, at 6:40 it does exactly what you're doing: quickly moving the mouse in and out and then it goes on and will explain how to fix that. youtu.be/0e4nHHOTXus?t=402

[TerraHQ]

solved usingg one animation! tsm