Jump to content
Search Community

Issue with playing/reversing animations on mouseenter / mouseleave

andrewycode test
Moderator Tag

Recommended Posts

Hello! Please see the attached codepen...

I have 2 different blur animations, one of which is more drastic than the other.

I have 3 elements that, on mouseenter, blur the other 2 elements with 1 of the 2 blur animations, and on mouseout, reverse those animations.

 

Everything works perfectly if you hover over one element and then hover away onto empty space.

However, if you instead quickly move your mouse between the three elements (without moving your mouse to empty space) you'll quickly see that the animations mess up and you can get into a state where your mouse is hovering over a blurred element (which it never should) or one of the non-hovered elements isn't blurred (which always should be).

 

I've been debugging this and I can (pretty) confidently say that:

- if I only used 1 blur animation instead of 2, everything would work perfectly

- if I replaced 1 of the blur animations with some other animation (like opacity), everything would work perfectly

- using gsap.killTweensOf() does not fix the issue

 

Any ideas on whats going on? Thanks in advance for your time and help!

 

 

See the Pen XWYaEYW?editors=0010 by andrewycode (@andrewycode) on CodePen

Link to comment
Share on other sites

Hi,

 

Your setup is a bit convoluted IMHO and you are clearly running into overwrite issues.

 

I think this approach is better and a bit more flexible:

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

 

Granted, due to the fact that you are using two different blur animations in different situations makes it a bit difficult to find a flexible and dynamic solution, but at least for three elements this works.

 

Let us know if you have more questions.

 

Happy Tweening!

Link to comment
Share on other sites

Hey @Rodrigo - thanks for your response! 

 

I appreciate the new approach that you suggested, but I am looking for a solution that still uses .reverse() on mouseleave. (My original codepen is kind of a boiled down example of something more complicated that I'm working on).

 

You mentioned that I'm running into "overwrite issues" - do you think that this is the core issue that I'm facing in my original codepen? Could you possibly expand on overwrite issues? Is there any documentation on overwrite issues? Any ways to combat overwrite issues from occurring? 

 

Thanks again!

 

 

Link to comment
Share on other sites

Hi,

 

The issue with overwrites is basically generated when one or more GSAP instances affect the same property (blur filter in this case), on the same element at the same time. Right now you are creating two different animations for each element before even running one of them. On top of that you are not correctly reversing all the animations, for example you move from heading-2 to heading-3. When you enter heading-2 the heading-1 element gets affected by one animation, when you move to heading-3, one heading-1 animation is reversed but as soon as you enter heading-3 another one starts while the other is still reversing. You have two different animations affecting the same property on the same element. On top of that overwrite won't help you in this case, you can test it by using this configuration in your methods:

function animation_blur(elem) {
  const theAnimation = gsap.timeline();

  gsap.set(elem, {
    filter: 'blur(0px)'
  });
  theAnimation.to(elem, {
    filter: 'blur(5PX)',
    ease: 'none',
    duration: 0.5,
    overwrite: true,
  });

  return theAnimation
}

function animation_blur2(elem) {
  const theAnimation = gsap.timeline();

  gsap.set(elem, {
    filter: 'blur(0px)'
  });
  theAnimation.to(elem, {
    filter: 'blur(20PX)',
    ease: 'none',
    duration: 0.5,
    overwrite: true,
  });

  return theAnimation
}

You'll notice that this definitely doesn't work the way you want. Here is what overwrite does:

 

If true, all tweens of the same targets will be killed immediately regardless of what properties they affect. If "auto", when the tween renders for the first time it hunt down any conflicts in active animations (animating the same properties of the same targets) and kill only those parts of the other tweens. Non-conflicting parts remain intact. If false, no overwriting strategies will be employed. Default: false.

 

Since your animations affect just one property everything will be flushed out and only the animations created by the animation_blur2 method will remain and work, that's why I think the best approach is the one I suggested, as that takes the element from it's current state to the state you want (no blur, low blur or high blur). If you need to use reverse, that means that you are using an event handler for doing that, so why using a method that creates a new GSAP instance is not an option?

 

If you want to keep the current approach you have, you have to look into reversing everything and then playing the instances you want, but you already ran into some logic issues with your code. Based on the Codepen example you gave us I provided a solution for the issue I saw there which should be scalable into a larger setup without too much problems.

 

If you keep having issues, let us know.

 

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

@Rodrigo - I truly appreciate your detailed explanation. Everything you said makes sense and speaks to the core of the issue that I was facing. I was not aware of the overwrite property, so that was super helpful as well. I believe I'll be able to come up with a good solution based on your feedback. Thanks again for your time and knowledge!!

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