GSAP animating decimal values breaking clip-path animation in Safari

[mroddev]

Hi.

 

I'm animating a div container clip-path using gsap. The idea here is to turn the container from a rectangle shape into a pill shape.

This is how I'm doing it inside a timeline:

  const videoPinTl = $gsap.timeline({
    scrollTrigger: {
      trigger: '.video-wrapper-pin',
      start: `center center`,
      end: "+=1000",
      pin: true,
      scrub: true,
    }
  })
    .fromTo('.video',
      {
        clipPath: 'inset(0% 0% round 50px)',
      }, {
      duration: 1,
      clipPath: `inset(46% 34% round 140px)`,
    })

Code above works fine in all browsers except Safari in which the shape radius bugs out while scrolling. I think the reason for this is because of the decimal values when animating from 50px to 140px. If I inspect the devtools and do a "manual" animation from 50px to 140px (without decimals) it doesn't bug.

 

Is there a way to make it so that the clipPath border-radius does not use decimal values while animating?

 

Thanks.

 

[Toso]

can you create a demo on Codepen so we can test it ?

 

btw , you can add the scrolltrigger in the tween without the timeline if you creating only this tween 

 

[Rodrigo]

Hi,

 

Animating Clip Path is a complex process and I remember that the inset type Clip Path has a few issues because sometimes the browsers can report an incomplete set of values.

 

One alternative is to use the Snap Plugin to use just entire values and avoid decimals:

https://gsap.com/docs/v3/GSAP/CorePlugins/Snap

 

Happy Tweening!

[mroddev]

Thanks for the reply @Toso and @Rodrigo

I have created a pen with the issue: 

See the Pen WNPydEZ by marcorodriguesdev (@marcorodriguesdev) on CodePen

To see the issue open the pen in Safari, and you'll see when you are close to the end of the animation, it sometimes flickers and the radius disappears. 

I realised one thing as I was setting up this pen, is that the problem seems to only happen with Lenis activated...

Also, i tried using the snap on the clipPath but it just stops working, are there any workarounds to avoid decimals?

[Cassie]

There may be a smarter way to do this - but you could use proxy values? It looks a bit janky animating without the decimal points - but here's a demo with proxy values as an illustration. Maybe you could play with snapping to percentage points or smaller values?

See the Pen RwvJQOJ?editors=0011 by GreenSock (@GreenSock) on CodePen

[Toso]

3 hours ago, mroddev said:

I realised one thing as I was setting up this pen, is that the problem seems to only happen with Lenis activated...

 

so what if, once we hit the trigger point for the animation we disable lenis?  unfortunately idk anything about Lenis so i was unable to test that   

[Cassie]

(or try it with ScrollSmoother) 💚

[Toso]

yes maybe he is ready for ScrollSmoother, just protect your eyes before clicking on that link  🫣🤩

 

https://codepen.io/collection/BNMEYN?cursor=eyJwYWdlIjoxfQ==

[mroddev]

I just did some more testing and it actually seems to also happen without smooth scrolling 😕 

Guess the problem really is the decimal values on the clip path radius property only.

[Rodrigo]

Hi,

 

Did you tried @Cassie's approach?

 

As I mentioned before there is a problem with the way some browsers report the inset value of the clip path property (sometimes the third value is missing or is reported as 0, which causes some odd behaviour, so the proxy approach would be the way to go. Other than that I'm afraid that there's not a lot we can do since this is a browser rendering problem and not something that stems from the way GSAP is handling things.

 

Another alternative would be to use SVG mask/clip in order to achieve the same effect, using the MorphSVG Plugin:

https://gsap.com/docs/v3/Plugins/MorphSVGPlugin

 

Hopefully this helps.

Happy Tweening!

[mroddev]

15 minutes ago, Rodrigo said:

Hi,

 

Did you tried @Cassie's approach?

 

As I mentioned before there is a problem with the way some browsers report the inset value of the clip path property (sometimes the third value is missing or is reported as 0, which causes some odd behaviour, so the proxy approach would be the way to go. Other than that I'm afraid that there's not a lot we can do since this is a browser rendering problem and not something that stems from the way GSAP is handling things.

 

Another alternative would be to use SVG mask/clip in order to achieve the same effect, using the MorphSVG Plugin:

https://gsap.com/docs/v3/Plugins/MorphSVGPlugin

 

Hopefully this helps.

Happy Tweening!

Hi.

I did and it indeed works, looks a bit laggy tho and it's not ideal for my use case. It's kinda weird because i even tried snapping only the radius property and letting the other values have decimals, but it still originates the bug.

 

I will look at different ways to do this, thanks for the help.

 

Will mark @Cassie answer as the solution.

[GreenSock]

Wow, Safari is just terrible with obscure rendering bugs! Obviously this has nothing to do with GSAP, but I tinkered with it and discovered that even with whole pixel values, it sometimes botched the clipping, like: 

clip-path: inset(422px 176px round 137px);

Which got me thinking about perhaps it being more linked to the radius being an odd number. So if we limit that to being an even number and then also convert the percentages into pixels (to make it smoother), and keep those whole too, it seemed to resolve everything, at least from what I could tell: 

 

See the Pen mdvGeWK?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Does that resolve it for you? 

[mroddev]

42 minutes ago, GreenSock said:

Wow, Safari is just terrible with obscure rendering bugs! Obviously this has nothing to do with GSAP, but I tinkered with it and discovered that even with whole pixel values, it sometimes botched the clipping, like: 

clip-path: inset(422px 176px round 137px);

Which got me thinking about perhaps it being more linked to the radius being an odd number. So if we limit that to being an even number and then also convert the percentages into pixels (to make it smoother), and keep those whole too, it seemed to resolve everything, at least from what I could tell: 

 

 

 

 

Does that resolve it for you? 

Hi.

I see what you mean, it still seems to flicker for me in safari.

Also this approach won't really work because of responsive issues. I need the shape to always end in a "capsule/pill" shape. Because in my real animation I also fit a phrase inside it right when the clip path animation ends.

Basically starts from a 16:9 rectangle (with radius) and goes down into a pill shape, that's the idea.

 

Thanks for your time tho

 

[GreenSock]

3 minutes ago, mroddev said:

it still seems to flicker for me in safari.

You're saying the codepen I posted still flickers for you in Safari? I tried a bunch of times and I couldn't see a single glitch ever even once. Hm. 

 

6 minutes ago, mroddev said:

Also this approach won't really work because of responsive issues.

I'm confused - why wouldn't it work? Did you look at the code to see that it's responsive? I must be missing something. 🤷‍♂️

[mroddev]

14 hours ago, GreenSock said:

You're saying the codepen I posted still flickers for you in Safari? I tried a bunch of times and I couldn't see a single glitch ever even once. Hm. 

 

I'm confused - why wouldn't it work? Did you look at the code to see that it's responsive? I must be missing something. 🤷‍♂️

It seems that screen size/resolution also affects the bug, on a 13" Mac screen it doesn't bug out but on a 24" and mobile screen it does, at least for me on safari. You can see it happening more if you grab the scroll wheel and do really small scrolls.

 

Forget about the responsive part, I didn't saw the setVideoDimensions function logic you have set, my bad.

 

 

[Thomas Günther]

Not sure if this is related or wether it helps you at all but I've recently encountered a similar Safari glitch when using clip-path.

Sometimes the browser just ignores the clip-path depending on how big the element is. In my case I hid the menu overlay with a clip-path and on some mobile devices the menu would sometimes appear out of nowhere with no way to close it (great work, Safari).

I could reproduce this by resizing desktop Safari's window to a very big size so I suspect some performance limitation. What I'm trying to say is Safari is kinda wonky when it comes to clip-path. I personally switched to using a mask-image and animating the mask-size.

[mroddev]

6 hours ago, Thomas Günther said:

Not sure if this is related or wether it helps you at all but I've recently encountered a similar Safari glitch when using clip-path.

Sometimes the browser just ignores the clip-path depending on how big the element is. In my case I hid the menu overlay with a clip-path and on some mobile devices the menu would sometimes appear out of nowhere with no way to close it (great work, Safari).

I could reproduce this by resizing desktop Safari's window to a very big size so I suspect some performance limitation. What I'm trying to say is Safari is kinda wonky when it comes to clip-path. I personally switched to using a mask-image and animating the mask-size.

The bug you had seems exactly the same I'm having.

About animating mask-image, do you think it's achievable to replicate the animation in the codepen using mask? It's kinda tricky because I don't think animating width and height only would replicate it, since it also animates the radius. I don't know much about Mask css properties, need to look.