Animating a Mask using GSAP

[soupking]

Hi Greensock,

 

I have a situation where I need to unmask an object. I don't know what's passing modern browser specs for this sort of thing. 

 

Does anybody have a basic codepen link on-hand for reference that shows a basic CSS mask DIV animate to reveal another DIV?

 

I will later need to figure out how to make a round mask using SVG data, but for now I'd like to know what I can use just to reveal an image from center using a straight scaleX using GSAP or something like it. 

 

Thanks for any help.

[mikel]

Hi @soupking,

 

a quick search in the GreenSock Forum

and you will find almost everything.

Here from our Mask expert @PointC:

 

 

Happy searching ...

 

Mikel

[explorerzip]

Have a look at this article about using the clip and clip-path properties in CSS. In short, css clip is deprecates, but will work in just about any browser including IE. Clip-path is the newer way of accomplishing the same thing, but with some newer bells and whistles.

https://css-tricks.com/clipping-masking-css/

 

The tricky part with this technique is figuring out the correct values for top, right, bottom left because it's a lot of trial and error especially on non-rectangular objects. You can use the browser's inspector to manually change these values on the fly, but you'll want to disable any external or inline JavaScript code.

 

I've found it best to use a TweenMax.to tween to change these values. You could end up with your object flashing on and off briefly when the web page is first loaded if you use a TweenMax.from tween. In your scenario:

 

1. Use clip: rect(0px, 0px, 0px, 0px) in CSS to make your object "invisible" on page load

2. Use a TweenMax.to tween to change those properties

 

I also recently posted a thread about using the css clip to do exactly what you want; reveal and hide objects. 

 

 

[soupking]

Thanks guys, I'll come back to this for reference. I ended up doing a sliding div hack to make something mask from center. If you do this use px values only. % tend to make things jittery.

 

That and I found a great bubbles demo from Jack I think. They were green so it was probably his. Can't find the link though.

 

Thanks again!