mm

June 3, 2015 WATB Team
Follow me on Twitter

Please note: The demo’s below have only been tested in Chrome. The clip-path property is not yet ready for use in production websites.

Clip path is a new CSS property steadily being rolled out across the modern browsers, which gives you the ability to cut out shapes from elements. Here I show you how you can use clip-path to create some interesting effects and animations.

My initial idea was to use clip-path to create a patterned image, and then animate the image. To start off with, I went with a diamond checker board pattern. So I created a dozen or so div tags, all with the same fixed background image, and then used flexbox to lay them out within a box, filling the box width ways and height ways. I then added a clip path, using a rhombus shape. However, the end result looks a bit like this:

checker

Where we are clipping each div to show the image background, we’ll just see white. To fill in the gaps, we need to duplicate this layer of boxes by wrapping them in another div tag, duplicating, and offsetting the second layer to position them correctly.

The end result looks something like this:

checker2

Now we can start to have fun animating our rhombus’ to create some fun effects.

Using CSS3 3D transforms, we can make each rhombus rotate in. We could start off with the second layer of rhombus’ rotated backwards so the image is upside down. Then, when you hover on the image, they rotate back in to zero degrees.

See the Pen JdWrGG by brightonmike (@brightonmike) on CodePen.

Then we could do something similar to the first layer, but with a slightly different rotation.

See the Pen xGqPwX by brightonmike (@brightonmike) on CodePen.

Here’s another idea:

See the Pen NqpwRW by brightonmike (@brightonmike) on CodePen.

What I really wanted to do though was create a slightly different effect using circles instead of a rhombus. Each circle would rotate in at a different time, randomly. The end result is below. Hopefully what I have demonstrated here is how you can use a combination of clip-shape, CSS transforms and transitions to create some amazing effects – all in pure CSS. There’s lots of other animations you could achieve, different clip path shapes, more layers, the possibilities are endless. Check out the code, have a play around and see what you come up with.

See the Pen aOJVwE by brightonmike (@brightonmike) on CodePen.

More about clip paths:

Clipping in CSS and SVG

Clip Path (Mozilla Development Network)

Clip Path – caniuse

Looking for more tips?

Jump on our mailing list & get digital goodness straight to your inbox; including helpful tips, tricks and the latest articles surrounding marketing, web design and branding.

Sign up →