Clip-Path Animation 💖

Hey 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>

2. Style the page.

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

.box{
    height: 100vh;
}

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

.b1{
    background-color: #e27d60;
}

.b2{
    background-color: #85cdca;
}

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;
}

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%);    
}

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.