Jump to content
GreenSock

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

Animating mask

Recommended Posts

Hi.

Hope someone can help me. I want to animate the mask upwards to reveal the image behind. The image can be any image. Can someone tell me what I've gotta change?

 

Thanks very much.

 

Gumbo

See the Pen qXxxwJ by Gumbo (@Gumbo) on CodePen

Link to comment
Share on other sites

Masks are available in SVG context only. Your image seems an 1x1 px one. You can't mask in pure DOM, only imitate it by hiding overflow and positiononing div content inside a rectangular box.

Link to comment
Share on other sites

Thanks for your reply guys.

Ohem, I need the image to stay where it is and for the mask to reveal it from the bottom to the top

Link to comment
Share on other sites

Thanks Oliver16Years,

 

Can u show me what u mean?

Link to comment
Share on other sites

Thanks very much Oliver16Years, exactly what I needed.

  • Like 1
Link to comment
Share on other sites

Isn't that the same thing I did?

  • Like 1
Link to comment
Share on other sites

Sorry ohem, I didn't want to steal Your solution. I was in a hurry and I thought Gumbo want something different when he wrote

Quote

"Ohem, I need the image to stay where it is and for the mask to reveal it from the bottom to the top"


I found a broken codepen in his post ( as I remember ) and forked it and fixed it which became almost exactly like Yours.

My 2 likes goes to You :)

  • Like 1
Link to comment
Share on other sites

Hi Ohem, with yours the image moved with the mask or that's wot happened when I used ur code. It was very close. Unless I didn't input ur code into mine correctly.

I really appreciate your help.

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