Jump to content

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

HTML5 Masking

Recommended Posts

Hi Guys, (and thx for the forum and thx in general to Greensock)


I need a simple reveal/masking "trick"? 

I call it a trick, because i dont belive that there is a direct method for it in CSS/HTML5.

I call it simple, 'cause i need it basically in it's simplest form.



- 2 layers that are interconnected (div's or img's or whatever)

- Layer 1 is invisible and controls what is shown of the 2nd layer.

- Layer 1 can be animated.


(Basic masking - like in the old and very much simpler Flash days :-))


Anyone figured this out?


I see a lot of SVG masking discussed, but thats not what i need in this case.

(so please dont refer me to those threads, im pretty sure i have investigated anything within reason for an explanation)


Also, please no -webkit stuff. It needs to be solid across browsers.


Hope that You guys can help an old time Greensock user out.


Thx in advance



Link to comment
Share on other sites

Hi @Kanst :)


This sounds more like a general CSS/HTML question and we do have to keep the support here focused on GSAP. That being said, I think you may find this CSS Tricks post helpful as you look for a masking solution.




Happy tweening.


  • Like 1
Link to comment
Share on other sites

Hi Craig,


Thx very much for Your reply.

I already red the post You refer to. (like I said, I've done my detective work and I don't just post here to avoid doing that).


Look at it this way (suggestively speaking):

It seems a lot of users (and possibly potential users) are looking for a solution to the problem?

Why not let them find it here, if there is one?


Let me rephrase maybe:

Although the underlying masking problem might be more directly related to CSS/HTML5 and the DOM - there is almost always some sort of tween involved in this effect. Would any of you Greensock experts be kind and helpful enough to provide an example that shows a potential solution where the tweening bits are done with the Greensock libraries?


If there is a solution - refer to the first post for conditions to this - i am pretty sure it would help alot of users to get this.

Here.. In the Greensock forum..


If not, an explanation to "why not" would help as a possible assurance in regards to potential clients asking this particular effect.


(I do however, understand the need to be "principle" in forums - so if you disagree in my logics it's fine, it really is :-) - I am not here for the debate, I am here for the solution! Just delete the post or whatever, and thx again)


Most sincerely



  • Like 1
Link to comment
Share on other sites

That CSS Tricks article has quite a few examples in it. Have you tried/forked any of those? To offer the best recommendations, we'd really like to see what you're masking. If you could put together a CodePen demo of your work so far, we can probably point you in the right direction. Here's some info about that:

Happy tweening.


  • Like 2
Link to comment
Share on other sites

25 minutes ago, Kanst said:

I've done my detective work


Hi @Kanst,


Try it here in the forum - keyword 'mask'.


For example in the post:  https://greensock.com/forums/topic/14998-animated-mask


As @PointC already said - with an example of you  it is easier to answer concrete questions / problems.


Kind regards


  • Like 2
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.