Shape Slideshow with Clip-path
Publikováno: 10.3.2021
An experimental slideshow using clip-path to create shape transitions between slides.
The post Shape Slideshow with Clip-path appeared first on Codrops.
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!
The post Shape Slideshow with Clip-path appeared first on Codrops.