How to Animate Clipping of Image?

[Davros]

I am trying to animate the "clipping" of an image exactly shown in this codepen when you click animate () but using only GreenSock libraries. Is this possible without resorting to svg and still being compatible with major browsers? I would like to have the image in my HTML as an img tag and cross-browser compatible with the latest versions of the major browsers. I don't need to support older browsers.

 

Could anyone illustrate how this would be done in GreenSock? Thank you very much!

See the Pen gggdZO by klodoma (@klodoma) on CodePen

[explorerzip]

Have a look at this post I made a while ago where I used the clip: rect(). That property is deprecated, but you can still use it. Clip-path is the newer and more robust way to do this kind of animation. https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path The old clip:rect() property will work if all you want is a simple horizontal wipe and it works in IE.

 

You'll need to redo your HTML with img tags and the JavaScript to make the Animate button work. The concept is the same though.

[GreenSock]

Yep, I'd agree with @explorerzip and another way you could do it is to nest an <img> inside of a <div> with overflow:hidden and then just animate the width/height of the <div> to clip the right/bottom and the x/y translation of both (in opposite directions) if you need to clip the left/top. 

 

Here's a fork: 

See the Pen cc865e17d39ee0e6508e0e72da44ee89?editors=0010 by GreenSock (@GreenSock) on CodePen

 

It'd be relatively easy to build a function that'd parameterize this so that, for example, you could just pass in the amount of pixels you'd like to chop off each side (top, left, right, bottom) and it'd spit back a timeline.  

[explorerzip]

Great point Jack! Didn't even think to use this approach. So much simpler (in this specific case) since there is some trial and error with the clip-path and clip properties.

[Davros]

@GreenSock You rock! That worked  I was wondering if you have any thoughts on how I can solve an additional issue that came up when I applied your approach.

 

The image that is sliding out of view is using object-fit: cover, which is causing problems when its parent div width is reduced by the animation. The image is resized dynamically as the div width decreases and this is not the behavior I want. I want the image to stay completely static while the div width decreases. You can see this occurring in my pen: 

See the Pen jRzjjO by davrosfl (@davrosfl) on CodePen

 The first image (gray bedroom) goes through some Tween effects then gets scaled as it slides out of view. 

 

Any ideas on how to elegantly solve this re-scaling issue so that the image stays static as it is being progressively hidden by the div width reduction? Thank you so much!

[GreenSock]

If I understand your question properly, it doesn't seem logically possible to keep object-fit AND do the other effects. Is there some reason you must keep object-fit? Perhaps you could just do that dynamically via JS. Either that or nest it again.

[Davros]

@GreenSock Right, I do not want the object-fit to continue to affect the image as the parent div slides. What I want is the image to keep the dimensions that were created from the object-fit before the slide starts. I just cant' figure out how to accomplish that.

[GreenSock]

Are you asking how to use pure JavaScript to resize an image/element to "cover" another? 

[Skibby]

Don't suppose you found a pen that explains how to do this with gsap3?

[Cassie]

Hey @alexsebastian,

Clipping is really more to do with CSS or SVG.

GSAP will only be animating the values so there wouldn't be much difference. Only a tiny bit of syntax to adjust (and it's all backwards compatible anyway)

If you're struggling - make a new thread with a minimal demo and we'll try to help.
 

 

[D-R Digital]

Hello, 

 

Is it possible to do a rotation of the image inside de clip path, without rotate the clip ? 

[mvaneijgen]

@D-R Digital welcome to the forum! Could you maybe start a new topic and show a minimal demo of what you already tried, we'd be happy to take a look!

 

Edit:

I was to curious! It is still better to open a new topic and show what you've already tried, because that way we can better help you, that said hope it helps and happy tweening! 

 

See the Pen xxzVarR by mvaneijgen (@mvaneijgen) on CodePen