Tutorial

Elementor Animated Border with clipping path

Video

Description

This video shows a way to create animated borders using a clipping path. The width of the border can be set with a CSS variable override. The border clips anything that is within it. So you can use a simple animation, video, article generator or any content you like.

Add Containerr

Add a Container to the editor, Name it "Main"
Add another Container inside Main, name it "Content"
Add whatever Widgets you want inside "Content"
Add another container to Main, call it "Mask"
Add the classes "clip-border col-justify-center" to Mask
Add another container inside Mask, call it "Inner"
Add a Spacer Widget inside "Inner"
Add the class "border-animation1" to the Spacer
Set the background color and size of the Spacer

Site CSS

Open Site Settings -> Custom CSS
Copy and paste the code below into it.

Code (click to copy)

CSS for Site Settings (css)

/*************************
FLEX UTILS
****************/
.col-justify-center{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Border clip*/
.clip-border {
    --thickness: 8px;
    --inner: calc(100% - var(--thickness));
    overflow: hidden;
    position: absolute;
    padding: 0;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    clip-path: polygon(0% 0%, 0% 100%, var(--thickness) 100%, var(--thickness) var(--thickness), var(--inner) var(--thickness), var(--inner) var(--inner), var(--thickness) var(--inner), var(--thickness) 100%, 100% 100%, 100% 0%);

}
  
/*Animations*/
.border-animation1{
    animation: border-animation1;
    animation-iteration-count: infinite;
    animation-duration: 7s;
    animation-timing-function: ease-in-out;
}
@keyframes border-animation1{
    100%{
        transform: rotate(360deg);
    }
}

.border-animation2{
    animation: border-animation2;
    animation-iteration-count: infinite;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
}
@keyframes border-animation2{
    0%{
        transform: translateY(-140%);
    }
    50%{
        transform: translateY(140%);
    }
    100%{
        transform: translateY(-140%);
    }   
}