Create basic "famous" image reveal "mask" effect (from top to bottom)- how to?

[Ezra Siton]

my codepen not working well (The image with distortion). 

 

https://www.loom.com/share/36a7900c2e084d49a9dc02875f223189

 

I saw this effect a lot of times (But its hard to inspect this effect) - (scroll down to team images)

https://www.yaroflasher.com/about/

 

Related issue (I do not want Solution by `absolute` position).

 

Any codepen -or- basic example of the trick behind. 

 

Thanks. 

See the Pen eYJOWjg by ezra_siton (@ezra_siton) on CodePen.

[PointC]

Hi and welcome to the forums.

 

A couple things:

 

I'd recommend using the new GSAP 3 syntax.

You also have a typo in your CSS:

 ovefrlow: hidden;

That being said, animating the scale is probably not what you want here. I'd just set the height of the wrapper to 0 and then use gsap to animate to height: "auto" (That's new in GSAP 3)

 

See the Pen 728d724d9ea411b7bf68889e13b02035 by PointC (@PointC) on CodePen.

 

Hopefully that helps. Happy tweening.

 

 

[Ezra Siton]

Thanks. This is the output i want. 

 

Any idea how to get the same effect but without `height`? (beacuse this change the box-model of my page). 

 

See her (The "hello world" move up and down) - in my reference (https://www.yaroflasher.com/about/) only the image clip.

 

I find a "middle" solution by extra overlay div (Less clean) - codepen example:

 

See the Pen gOPYRKP by ezra_siton (@ezra_siton) on CodePen.

[ZachSaucier]

17 minutes ago, Ezra Siton said:

Any idea how to get the same effect but without `height`? (beacuse this change the box-model of my page). 

You could make the image a background image with fixed sizing instead. 

 

Or you could use GSAP to set the height of a container to the height of the content and then animate the content's height. After the animation is done, remove the set height on the container.

[Ezra Siton]

Anyway to solve this by clip or mask? maybe

[PointC]

Yeah, there's a bunch of ways to achieve this effect. I'd recommend Zach's idea. You could also use a div the same color as the background to cover the image and animate the scale of that div. You could also put the image into a SVG and use a mask or clip-path. All kinds of options available to you.

[ZachSaucier]

CSS clip paths don't have good support. SVG clip paths have better support but not perfect. Most likely it'd be fine though.

[Trapti]

This is one way but with additional element. 

 

See the Pen ca934da6f3541fca564bbb320484539b by tripti1410 (@tripti1410) on CodePen.

[ZachSaucier]

11 minutes ago, Trapti said:

This is one way but with additional element. 

Your function creates a bunch of conflicting tweens there. I think you meant to create it outside of the mouseover listener and control it inside of the listener? I write more extensively about how to do that in my article on animating efficiently. Also it's best to use .addEventListener() instead of a direct onmouseover like that because there's a possibility for things to get overwritten if someone has multiple listeners of the same type on an element.

[AsKadir]

@Ezra Siton Hey, Ezra!

I think it's the best way, if you don't want to use height and position absolute:

See the Pen oNbgwbE by ChicagoJostik (@ChicagoJostik) on CodePen.

 

[Ezra Siton]

On 6/1/2020 at 7:51 PM, ZachSaucier said:

how to do that in my article on animating efficiently

Great article. Thanks.