Jump to content


SVG animated irregular shape mask with clickable areas underneath

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

Hello fellow Greensockers!


My conundrum is as follows:

- I'm trying to layer several images on top of one another

- Each image is masked with a curved / irregular shaped SVG mask (could be PNG or SVG Path or external SVG)

- Each mask needs to animate

- Now heres the kicker, each image needs to be clickable / interactive within the constraints of the mask area


I forked Jonathan's example (http://codepen.io/jonathan/details/OyarJK), as it was already using an animated SVG/PNG mask which ticked off the 1st 3 points above.


My fork is here -


I am using a SVG Path for the 1st mask, and a SVG file for the second mask. Just to test both. So the 1st one is not using attr for animation whilst the second one is.


Each image has a hover event listener, but as you can see the top image clickable area takes up the entire banner, outside of the masked area.


I realise I can achieve this with separate, invisible buttons on top of the SVG image masks, but this would mean code duplication, and also animating the invisible buttons to move with the masks + images.  I tried various combinations of pointer-events on the image / SVG layers, but to no avail.


So I'm very curious to know if this is possible, as this method of masking seems to be the best and most cross browser friendly.


Thanks for any help in advance!



See the Pen zqzmKV by timostsauber (@timostsauber) on CodePen

Link to comment
Share on other sites

It sounds like you need to do collision detection on a polygon, which is not that straightforward. First you need to approximate your Bezier curves as polygons, similar to this...

See the Pen jbVPqw by osublake (@osublake) on CodePen


Then you need to do boolean operations on your shapes. JavaScript Clipper is the best tool for that.



Demo boolean operations



To check if a point (click event) is inside a polygon, you can use Clipper's PointInPolygon() method.


  • Like 7
Link to comment
Share on other sites

Thanks OSUblake,  


Yeah I agree completely. Collusion detection isn't that straightforward, and would be mega overkill for this application of buttonery.


Looks like I'll be sticking with duplicate buttons as paths, on top of the other images + masks. I just need to animate the button paths with the image masks simultaneously, so they line up.



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