TerraHQ Posted March 9, 2022 Share Posted March 9, 2022 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 Link to comment Share on other sites More sharing options...
elegantseagulls Posted March 9, 2022 Share Posted March 9, 2022 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() 1 Link to comment Share on other sites More sharing options...
mvaneijgen Posted March 9, 2022 Share Posted March 9, 2022 If I read you question correctly this tutorial exactly discribes your issue 2 Link to comment Share on other sites More sharing options...
TerraHQ Posted March 9, 2022 Author Share Posted March 9, 2022 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. Link to comment Share on other sites More sharing options...
OSUblake Posted March 9, 2022 Share Posted March 9, 2022 Here's a different approach to that problem. See the Pen dyZBqzr by GreenSock (@GreenSock) on CodePen Original thread... Link to comment Share on other sites More sharing options...
TerraHQ Posted March 14, 2022 Author Share Posted March 14, 2022 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 grabacion-de-pantalla-2022-03-14-a-las-174829_Uj0fRUTg.mp4 Link to comment Share on other sites More sharing options...
OSUblake Posted March 14, 2022 Share Posted March 14, 2022 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. Link to comment Share on other sites More sharing options...
mvaneijgen Posted March 15, 2022 Share Posted March 15, 2022 @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 Link to comment Share on other sites More sharing options...
TerraHQ Posted March 22, 2022 Author Share Posted March 22, 2022 solved usingg one animation! tsm 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