Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
WW

about the mask effects in Gsap(js)

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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  :-P

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

WOW~~
Thanks for such a helpful replying. :-D

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.
×