andrewycode

Hi Jack, Thanks for your response! I added a wrapper div around the element being animated and added will-change: transform to only that wrapper div. This fixed the issue! Thanks again, - Andrew

Hi Rodrigo, Thanks for your help. Unfortunately adding the will-change: transform CSS rule to the element did not fix the issue. However, I now realize that this bug occurs in Chrome, but not Firefox or Safari. So I guess it is a browser issue / chrome bug. Let me know if you have any other suggestions or thoughts. Thanks again, - Andrew

Hello, I'm experiencing a weird issue. Please see the codepen demo attached. I am animating the "y" property of the blue div. Inside the blue div is a red div. Below the blue div is a yellow div. When the yellow div is around 1900px or shorter (or if it doesn't exist at all), then everything works perfectly. However, if the yellow div is around 2000px or taller, then this issue occurs: The red div (inside the blue div) does not appear until AFTER the animation finishes running. I have been looking into this for a while and I can't figure out why this is happening. Any help would be appreciated. Thanks in advance. - Andrew

@Rodrigo - ok totally makes sense, thank you for your help

@Rodrigo - thanks for your response, but I think you misunderstood my question. I'm wondering if it is possible to animate brightness with a different duration than blur on the same element. (ie: animate brightness for a duration of 3 and blur for a duration of 1).

So as you can see in my example, I'm wanting to animate an element's blur and brightness. But my question is - is it possible to animate the element's blur with a duration of 1 while also animating it's brightness with a duration of 3? I'm thinking that this isn't possible, since blur and brightness are both part of the same CSS property (filter). But I wanted to ask the forum and see if anyone has any ideas? Thanks!

@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!!

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!

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!

Hey @Rodrigo - thanks so much for your quick and detailed response!! I ended up going with the solution that uses gsap.delayedCall with onLeave and onLeaveBack and it worked perfectly! Thanks again!

Hello, I have a scrollTrigger animation with a delay and toggleActions set to "play reverse play reverse". Everything works perfectly onEnter and onEnterBack (including the delay), however onLeave and onLeaveBack, the delay is ignored and instead the reverse animation runs immediately. Any ideas on how I can get the delay to work in all instances? Please see attached codepen. Thank you!