Jump to content
GreenSock

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

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.

 

So:

- 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

/Simon

 

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.

 

https://css-tricks.com/clipping-masking-css/

 

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

/S

 

  • 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

Mikel

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