Jump to content
Search Community

about the mask effects in Gsap(js)

WW test
Moderator Tag

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




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


It works in IE(10.0.9200), FF(21.0), Safari(5.17), Chorme(27.0)


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



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



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



With a background image



Hope this helps,



  • Like 1
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.
  • Create New...