Streaming live at 10am (PST)

Clip path to an animated div


#1

Hi, is it possible to add custom code to use a regular DIV as a clippath to mask an image, then animate the div? The examples I can see in non-webflow sources all have code that defines the size of polygons and then animates them but I don’t know how to extract the code I need to use in webflow.

This CodePen seems to do what I want but with a more complicated polygon: https://codepen.io/designhooks/pen/OVyPoX

I looked at Vincent’s post but not sure if what I need is there: http://clipping-masking.webflow.io/

Also this looks like it could provide the answer, but again I just don’t know enough about code to extract what I need: https://css-tricks.com/clipping-masking-css/

Basically I want to have a rectangular DIV with an image, then rotate the DIV on X and Z axis masking the picture which remains un-rotated.

Possible? Here is an image of the start and end state I am looking to achieve.