GSAP animating decimal values breaking clip-path animation in Safari
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,
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.