Tutorial

Elementor Animated Border with clipping path

Uses Plugins

Elementor PRO

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.

1

Add Containerr

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

Site CSS

  1. Open Site Settings -> Custom CSS
  2. 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%);
    }   
}