DEV Community

Ustariz Enzo
Ustariz Enzo

Posted on • Updated on

Clip-Path Animation 💖

clip patch animationHey fellow creators,

Let’s create an easy but awesome clip-path animation in less than a minute!

If you prefer to watch the video version, it's right here :

1. The HTML structure.

Create two boxes with one image inside each one.

<div class="box b1">
   <img src="img1.jpg">
</div>

<div class="box b2">
   <img src="img2.jpg">
</div>
Enter fullscreen mode Exit fullscreen mode

2. Style the page.

First resize each box to take up the full height of the viewport:

.box{
    height: 100vh;
}
Enter fullscreen mode Exit fullscreen mode

Then add a different background colour to each box to differentiate them easily:

.b1{
    background-color: #e27d60;
}

.b2{
    background-color: #85cdca;
}
Enter fullscreen mode Exit fullscreen mode

Now, size the images however you want, center them and fix them to the middle of the screen, following the scroll:

img{
    object-fit: cover;
    height: 600px;  
    width: 400px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: fixed;
}
Enter fullscreen mode Exit fullscreen mode

For now, the images are one above the other. To fix that, you need to clip the boxes so that only the correct image shows:

.box{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);    
}
Enter fullscreen mode Exit fullscreen mode

The values inside of the parentheses correspond to the X and Y coordinates of the clipped area.
It will create a new stacking context for each box and only show what is inside that stacking context.

You’ll now have a lovely animation to showcase your images!

Come and take a look at my Youtube channel: https://www.youtube.com/c/TheWebSchool

See you soon!

Enzo.

Discussion (0)