mroddev

I just solved my problem with your suggestion of wrapping the content with a <div> with overflow hidden and animate that div instead. Animating the radius of a div works exactly like I wanted instead of animating the RX of a Svg Rect.

Sorry for the confusion, it's a bit hard to explain. In short, if you ignore the safari problem from the first pen above, this is the animation I want in the second pen. The second pen is currently pretty much the same as the first one but without the radius animation. I have updated the second pen with the problem I mentioned above, just added two animations at the end of the timeline to change the radius of the shape. You can currently see that when scrolling down the radius doesn't quite animate like the first pen and also when scrolling up (after you've passed the animation) you can see the overwrite problem I mentioned and the radius being janky. I'm not sure if the problem is still clear tho 🤔

Hello. I had previously a problem in Safari when using clip-path to animate a shape with scrolltrigger. Thread here: So I went ahead and over engineered a solution that solves the problem just with a small issue. The solution pen: https://codepen.io/marcorodriguesdev/pen/MWLPmpG Now I need to animate the shape Rect rx value from 40 to around 280 (when it hits around 30% of the animation scrolled) and back to 40 again. The main goal here is to make the animation feel like this pen: https://codepen.io/marcorodriguesdev/pen/WNPydEZ (pen from previous issue). If you take a closer look, you can see the radius animates while the shape is decreasing size until it's a full pill shape. I have tried animating the svg rect rx property with the position parameter but without success because of overwrite problems.

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.

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.

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

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.

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.

Thanks for the reply @Toso and @Rodrigo I have created a pen with the issue: https://codepen.io/marcorodriguesdev/pen/WNPydEZ 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?

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.