Safari bug when trying to perform a gsap scale animation on SVG path within a SVG clippath

[Damian Hutter]

Hello there,

I was playing around with GSAP for the first time and for the most part I love it. However, one bug lets me bang my hand against the wall for the past couple of days. What I want to do:

Text in the middle of the screen which gets 'eaten' up by an svg which scales towards 0.

 

In my understanding I need to create an SVG clip-path for this. Apply it to a <div> surrounding the text and animate the path within the SVG so I don't scale the container with the text. As this would also scale the text itself.

 

So far so good. Firefox and Chrome work as intended. However, Safari is not updating the animation visually. Even though you can see the animation running in the dev tools. (see attached screenshot)

 

Every idea would be really appreciated. Thanks a lot in advance!

Link to a codesandbox - https://udep9.csb.app/

 

 

[Cassie]

Hey @Damian Hutter,

Have you tried a webkit prefix? - https://stackoverflow.com/questions/41860477/why-doesnt-css-clip-path-with-svg-work-in-safari

[Damian Hutter]

Hi @Cassie thanks a lot for your reply. Yes, I've tested webkit before and it wasn't working either. I even found a discussion on stackoverflow suggesting to delete webkit all together as it breaks in some cases : https://stackoverflow.com/questions/44722751/svg-clip-path-not-working-on-safari

But for me no luck so far. With or without webkit. 😞

[OSUblake]

Some browsers optimize stuff like that because clipPath elements aren't rendered, so they don't track changes.

 

You can force it to apply new changes in an onUpdate of your animation, so you should pass in the element the clipPath is applied to in your function.

 

onUpdate() {
  myDiv.current.style.clipPath = "none";
  
  // force the browser to recalculate the element
  myDiv.current.offsetWidth;
  
  myDiv.current.style.clipPath = "url(#hello)";
}

 

[OSUblake]

Also, you should let GSAP handle transforms.

 

// bad
transform: "scale(5)"

// good
scale: 5

 

[Damian Hutter]

@OSUblake 😮 omg that really solved it... That's amazing. Thanks a lot for this. Also for the guidance about what attributes to use so GSAP is doing the heavy lifting. Need to look into all of this in more detail for sure.

Just out of curiosity - would you say this approach is a good way to achieve the desired effect or is there a more elegant way in GSAP to do something like this? Also the onUpdate function will have an impact on the performance or?

Thanks again for this quick help!

[OSUblake]

26 minutes ago, Damian Hutter said:

Just out of curiosity - would you say this approach is a good way to achieve the desired effect or is there a more elegant way in GSAP to do something like this?

 

If you need to use HTML elements for the clip path, then that's pretty much all you can do.

 

26 minutes ago, Damian Hutter said:

Also the onUpdate function will have an impact on the performance or?

 

A little bit, but there is no way around that at the moment. Chrome used to have the same issue, but it looks like they've resolved it. Just have to wait for Apple to do the same.

 

[Damian Hutter]

Thanks a lot man, really made my day!  🎉