mroddev Posted November 24, 2023 Share Posted November 24, 2023 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. Link to comment Share on other sites More sharing options...
Toso Posted November 24, 2023 Share Posted November 24, 2023 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 Link to comment Share on other sites More sharing options...
Rodrigo Posted November 24, 2023 Share Posted November 24, 2023 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! Link to comment Share on other sites More sharing options...
mroddev Posted November 25, 2023 Author Share Posted November 25, 2023 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? Link to comment Share on other sites More sharing options...
Cassie Posted November 25, 2023 Share Posted November 25, 2023 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 1 Link to comment Share on other sites More sharing options...
Toso Posted November 25, 2023 Share Posted November 25, 2023 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 Link to comment Share on other sites More sharing options...
Cassie Posted November 25, 2023 Share Posted November 25, 2023 (or try it with ScrollSmoother) 💚 1 Link to comment Share on other sites More sharing options...
Toso Posted November 25, 2023 Share Posted November 25, 2023 yes maybe he is ready for ScrollSmoother, just protect your eyes before clicking on that link 🫣🤩 https://codepen.io/collection/BNMEYN?cursor=eyJwYWdlIjoxfQ== 3 Link to comment Share on other sites More sharing options...
mroddev Posted November 28, 2023 Author Share Posted November 28, 2023 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. Link to comment Share on other sites More sharing options...
Rodrigo Posted November 28, 2023 Share Posted November 28, 2023 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! 1 Link to comment Share on other sites More sharing options...
mroddev Posted November 28, 2023 Author Share Posted November 28, 2023 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. Link to comment Share on other sites More sharing options...
Solution GreenSock Posted November 28, 2023 Solution Share Posted November 28, 2023 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? 1 Link to comment Share on other sites More sharing options...
mroddev Posted November 28, 2023 Author Share Posted November 28, 2023 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 Link to comment Share on other sites More sharing options...
GreenSock Posted November 28, 2023 Share Posted November 28, 2023 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. 🤷♂️ Link to comment Share on other sites More sharing options...
mroddev Posted November 29, 2023 Author Share Posted November 29, 2023 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. Link to comment Share on other sites More sharing options...
Thomas Günther Posted November 29, 2023 Share Posted November 29, 2023 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. 1 1 Link to comment Share on other sites More sharing options...
mroddev Posted November 29, 2023 Author Share Posted November 29, 2023 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. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now