How to animate shape divider in elementor

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.

.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
@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.
body{ overflow-x:hidden}
We are done !!! Here is the final codes.
.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}

Share this post

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest

Leave a Reply

Close Menu
This website uses cookies to provide you with the best service. By using our website, you agree to use the cookie. Learn More