[Bug report: animated element with clip-path property that is using viewport units doesn't resize correctly]

That makes sense! It works perfectly now thanks! 😄

[Bug report: animated element with clip-path property that is using viewport units doesn't resize correctly]

Hey Rodrigo,

 

that animation is working as intended, the problem lies with the animation before that one.

I've included a screen cast of the issue so hopefully that can clear it up. Here it is:

https://imgur.com/a/euP8K0C
 

OS: Ubuntu 20
Browser: Firefox, Chromium

[Bug report: animated element with clip-path property that is using viewport units doesn't resize correctly]

That makes sense! I wasn't aware the browser always gives back px.

I changed my pen a bit in the meantime to make the revealed image be static and not get pinned together with the cutout. To achieve that I changed the animation from animating the Y value to directly animating the clip-path property.
Sadly now there's another bug/unintended side effect happening and I can't quite figure out why.

The problem is that when you resize the screen during the scroll animation the animation will jump directly to it's endpoint and only jump back to it's correct position once you start scrolling again.

Any idea why this is happening/ how to fix this?

 

Here's the pen

 

See the Pen NWzyyLZ by leongeldsch (@leongeldsch) on CodePen

[Bug report: animated element with clip-path property that is using viewport units doesn't resize correctly]

Hello Greensock team,

 

I want to report a bug where an element that gets animated and has the clip-path property set to a value containing a viewport unit (vw in this case), gets that value translated into pixel and set as an inline style, overwriting the original style (I don't know why that is necessary but I'm sure there's some reasoning behind this behavior). By itself there is no problem with that but if I resize my screen now (try changing the width of the window in the demo), the size of the circle doesn't change anymore since it's radius got converted from vw to px.

 

Is there any way you could fix this?

 

Thank you for your time

Leon

 

See the Pen LYreVgB by leongeldsch (@leongeldsch) on CodePen

[Ways of doing an image reveal on scroll]

Hello Greensock community!

 

I'm currently building an animation that reveals an image from a small circle cutout to a full screen image.

I've managed to get it working the way I want to using the CSS clip-path property. Sadly that property is not supported by some older iOS devices and I was wondering if anyone maybe has an idea on alternative ways of implementing the same effect.

 

See the Pen LYreVgB by leongeldsch (@leongeldsch) on CodePen