Shape Slideshow with Clip-path

An experimental slideshow using clip-path to create shape transitions between slides.

From our sponsor: Guide customers along the path to purchase with our award-winning platform. Starting at $14.99/mo.

Rounded shapes are back in fashion! Specifically, pill shaped forms are really hot right now, as can be seen on Icelandic Explorer for example:

On Gucci Beauty you can see many rounded shapes, especially rounded cards:

Window-like shapes are also super trendy, as can be seen in this beautiful poster design by Ana Sakac:

Another example is this great design by mashiqo:

I recently also stumbled across this beautiful Dribbble shot by Tyshchuk Maryna:

I thought that this might be somehow possible to do with a clip-path animation, so I started experimenting. It turns out that by using any kind of <basic-shape> you can create a unique look for a slideshow transition, or any other kind of transition, like a hover for example:

As a result, I have created four demos showing some ideas that might spark your inspiration. I really hope you like them!

Here is that pill-shaped look I was after:

Note that for non-supporting browsers, we’ll simply see the slide move without a clip-path applied to it.

Thank you for checking by and hope you enjoy this!

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.