about the mask effects in Gsap(js)

[WW]

Does anyone knows about the mask effects in JS with GSAP?

I know it might be a easy skill for u guys.

but , i just wanna know about that. ><"

 

and...

 

btw, is there any article or discussion can show me all the params in GSAP?
such as: left , top, opacity..etc

 

Thanks a lot 

[WW]

I found 2 discussion:

 

1.mask image:
It's pity that just works on webkit browsers
http://thenittygritty.co/css-masking

 

2.clip:
It works in IE(10.0.9200), FF(21.0), Safari(5.17), Chorme(27.0)
http://forums.greensock.com/topic/7796-animating-container-smaller-but-have-child-same-size-not-moving-with-container/?hl=crop#entry29738

 

If anyone has better resolves please let me know.
Thanks a lot.

[GreenSock]

I think that about sums it up. Clip is probably your best bet, or just use a div with overflow:hidden and adjust the width/height and/or its contents' margins. 

 

Oh, and you can use SVG or a canvas-based library for more advanced masking, but neither of those is for masking regular DOM elements really. 

[Rodrigo]

Hi,

 

You could use canvas to create masking, at least on images, check this article:

http://blog.teamtreehouse.com/create-vector-masks-using-the-html5-canvas

 

The sample fiddle has a problem with the image request, so you have to replace the image's URL, try http://lorempixel.com

 

As for clipping the only sample I have are the following:

 

Just content

http://jsfiddle.net/rhernando/fFJ29/

 

With a background image

http://jsfiddle.net/fFJ29/19/

 

Hope this helps,

Cheers,

Rodrigo.

[WW]

WOW~~
Thanks for such a helpful replying.