Jump to content


Animated Mask

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

I am trying to take a png, or it could be an svg shape, see attached.


I want this png to serve as a mask so that when it is rotated the image beneath it is being revealed.  I used to do this all the time in flash and am not sure how to proceed in html5.  any help will be greatly appreciated


Link to comment
Share on other sites

Hi CarpeDiem  :)


You can use that shape as a mask or a clip-path. Here's a pen I made a while back to demonstrate basic usage of a mask in SVGs.


See the Pen KzmXYK by PointC (@PointC) on CodePen


That should get you started in the right direction. 


Happy tweening.


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