Jump to content
GreenSock

soupking

Animating a Mask using GSAP

Recommended Posts

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. :)

Link to comment
Share on other sites

Hi @soupking,

 

a quick search in the GreenSock Forum

and you will find almost everything.

Here from our Mask expert @PointC:

 

 

Happy searching ...

 

Mikel

  • Like 2
Link to comment
Share on other sites

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. 

 

 

  • Like 2
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×