How to animate shape divider in elementor

[web_stories_embed url=”https://blog.maxkinon.com/web-stories/how-to-animate-shape-divider-in-elementor/” title=”How to animate shape divider in elementor” poster=”” width=”360″ height=”600″ align=”none”]

Ever though if you can animate the elementor shape divider? Yes you can. Lets try to animate it.
First of all add your section and set the shape divider you want and choose the appropriate color as well. Then give the section a class. In my case it is “my_shape”.

If you inspect the shape divider you will see elementor wraps it with a div called “elementor-shape elementor-shape-bottom”. It will be elementor-shape-top if you add shape divider on top.

Lets add some CSS.

As you can see we need to increase the width of our shape. Lets make it 210%. And then we need to add animation property so that we can animate the divider.

First we will provide the animation name.It can be any name. Then the duration of the animation. We will give a long duration to make it slow and smooth. Then we will use a cubic bezier animation to make it more dramatic. And finally make it infinite loop.

You can visit https://cubic-bezier.com/ for some awesome cubic bezier effect to use.

Now we need to create that ‘shape’ animation

We will play with margin left. at 0% it will be 0. For 50% we need to set a bigger value. I found out 1600px works perfectly.
And for 100% we need to set it 0 again.

Lastly lets set the body overflow-x to hidden.

We are done !!! Here is the final codes.

body {
     overflow-x:hidden;
} 
.elementor-shape-bottom {
     bottom: -1px;
     animation: wave 22s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
     width: 210%;
 } 
@keyframes wave {
   0% {
     margin-left: 0;
   }
     50% {
     margin-left: -1600px;
   }
   100% {
     margin-left: 0px;
   }
 }


body {
     overflow-x:hidden;
} 
.elementor-shape-top {
     bottom: -1px;
     animation: wave 22s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
     width: 210%;
 } 
@keyframes wave {
   0% {
     margin-left: 0;
   }
     50% {
     margin-left: -1600px;
   }
   100% {
     margin-left: 0px;
   }
 }


body {
     overflow-x:hidden;
} 
.elementor-shape {
     bottom: -1px;
     animation: wave 22s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
     width: 210%;
 } 
@keyframes wave {
   0% {
     margin-left: 0;
   }
     50% {
     margin-left: -1600px;
   }
   100% {
     margin-left: 0px;
   }
 }