How To Animate Shape Dividers

In this video I will show you how to easily animate your shape dividers in Elementor.

Elementor (Affiliate Link):
https://wickydesign.com/get-elementor

CSS Animation Documentation:
https://developer.mozilla.org/en-US/docs/Web/CSS/animation

CSS Code:
body{ overflow-x:hidden}
.elementor-shape{
width: 200%;
animation: shape 10s ease-in-out infinite;
}

@keyframes shape {
0% {left: 0;}
50% {left: -50%;}
100% {left: 0;}
}
@media only screen and (max-width: 767px) {
.elementor-shape {display:none;}
}

Timestamps:

• 0:00 Introduction
• 0:19 Backend Settings
• 0:55 Setup Shape Dividers
• 1:35 Add Custom CSS Code
• 6:48 CSS Keyframes
• 8:37 Testing
• 9:34 Responsive Modes
• 10:05 Hide Shape Dividers On Mobile