clip-path Animations

Here's a cool sliding animation I learned in a course by Josh Comeau. clip-path is one of those handy properties that is very easy to use and the browser can offload it to GPU rendering.

@keyframes slideIn {
    from {
        clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
    }
    to {
        clip-path: polygon(0% 0%, 100% 0%, 100% 150%, 0% 150%);
    }
}
  
.animated-element {
    /* whatever base styles your element has */
    will-change: transform; /* browser hint to use GPU */
    animation: slideIn 1250ms infinite;
}

One very important thing to note is that clip-path doesn't change the shape of the element in the DOM. If that's required, you can use shape-outside (see below).

Read More

• <basic-shape> docs on MDN (which is the data type clip-path uses)
• clippy, a tool that showcases many shapes and allows you to make your own
• Creating Non-Rectangular Layouts With CSS Shapes, by Sara Soueidan