[Element inside the element being animated isn't visible until after animation finishes]

42 minutes ago, GreenSock said:

Did you try adding it to various elements including the parent? I've recently seen some very odd Chrome-specific rendering issues (totally unrelated to GSAP), particularly with large elements. It's like Chrome has some limit to the dimensions that it buffers or renders in certain scenarios (maybe an optimization they're trying to apply...but it breaks large things). I know that in one of those scenarios in the past, adding will-change to the element and/or its ancestor(s) seemed to resolve it. 🤷‍♂️

 

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

[Element inside the element being animated isn't visible until after animation finishes]

37 minutes ago, Rodrigo said:

Hi,

 

Maybe it could be a rendering glitch, the GSAP part of your code looks OK and shouldn't cause the issue. Maybe try adding will-change: transform to the blue element:

.bgblue {
  background: blue;
  will-change: transform;
}

Hopefully this helps.

Happy Tweening!

 

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

[Element inside the element being animated isn't visible until after animation finishes]

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

See the Pen zYMQjVB by andrewycode (@andrewycode) on CodePen

[Different CSS Filter properties animating on same element with different durations - (is this possible?)]

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

[Different CSS Filter properties animating on same element with different durations - (is this possible?)]

@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).

[Different CSS Filter properties animating on same element with different durations - (is this possible?)]

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!

See the Pen Poadqvm?editors=1010 by andrewycode (@andrewycode) on CodePen

[Issue with playing/reversing animations on mouseenter / mouseleave]

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

[Issue with playing/reversing animations on mouseenter / mouseleave]

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!

 

 

[Issue with playing/reversing animations on mouseenter / mouseleave]

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

[ScrollTrigger - toggleActions - Delay Not Working On Reverse]

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!

[ScrollTrigger - toggleActions - Delay Not Working On Reverse]

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!

See the Pen KKeWByp by andrewycode (@andrewycode) on CodePen