How to animate shape divider in elementor

Table of Contents

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”.

shape1 Maxkinon

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.

1
2
3
4
.my_shape .elementor-shape-bottom{
width: 210%;
  animation: shape 22s cubic-bezier(.42,0,.58,1) infinite;
}

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

1
2
3
4
5
6
7
8
9
10
@keyframes shape {
  0%{
  margin-left:0;
  }
  50%{
  margin-left:-1600px;
  }
    100%{
  margin-left:0;
  }

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.

1
body{ overflow-x:hidden}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.my_shape .elementor-shape-bottom{
width: 210%;
  animation: shape 22s cubic-bezier(.42,0,.58,1) infinite;
}
@keyframes shape {
  0%{
  margin-left:0;
  }
  50%{
  margin-left:-1600px;
  }
    100%{
  margin-left:0;
  }
  body{ overflow-x:hidden}

if not work then use this code

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;
   }
 }

 

0 0 votes
Article Rating
Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments