[Animate timeline value inside Scrolltrigger from X to Y then to X again.]

11 hours ago, GreenSock said:

I don't have a lot of time to dig into this right now, but I'm having a hard time understanding what exactly the problem is and what you mean by "...but without success because of overwrite problems." 

 

When I remove all the GSAP code and just look at your demo in Safari, the clip-path doesn't work at all. I don't see the video, period. Weren't you trying to do this without clip-path because Safari botches it so much? 

 

Have  you thought of just using a normal <div> with overflow: hidden and a border radius? And then you could animate its height/width and counter-animate the top/left of the absolutely positioned video child? Just an idea; I'm not sure how hard it'd be.

 

But if you could try to be SUPER clear about exactly what the problem is and how we can reproduce it, that'd be swell. 

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.

 

 

[Animate timeline value inside Scrolltrigger from X to Y then to X again.]

11 hours ago, GreenSock said:

I don't have a lot of time to dig into this right now, but I'm having a hard time understanding what exactly the problem is and what you mean by "...but without success because of overwrite problems." 

 

When I remove all the GSAP code and just look at your demo in Safari, the clip-path doesn't work at all. I don't see the video, period. Weren't you trying to do this without clip-path because Safari botches it so much? 

 

Have  you thought of just using a normal <div> with overflow: hidden and a border radius? And then you could animate its height/width and counter-animate the top/left of the absolutely positioned video child? Just an idea; I'm not sure how hard it'd be.

 

But if you could try to be SUPER clear about exactly what the problem is and how we can reproduce it, that'd be swell. 

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 🤔

 

 

[Animate timeline value inside Scrolltrigger from X to Y then to X again.]

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: 

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: 

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

 (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.

 

 

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

[GSAP animating decimal values breaking clip-path animation in Safari]

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.

[GSAP animating decimal values breaking clip-path animation in Safari]

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.

 

 

[GSAP animating decimal values breaking clip-path animation in Safari]

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

 

[GSAP animating decimal values breaking clip-path animation in Safari]

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.

[GSAP animating decimal values breaking clip-path animation in Safari]

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.

[GSAP animating decimal values breaking clip-path animation in Safari]

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?

[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,
      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.