Animated Waves as Section Dividers in Divi

Updated for Divi 5: I tested the animated waves in Divi 5 and they work. Below you'll find the exact settings from my free layout (cleaner than the code in the video), with the Divi 5 menu paths and the Divi 4 ones where they differ.

Animated waves as section dividers in Divi

An animated wave divider is an SVG shape in a Code module, duplicated once and moved slowly to the left with a CSS animation, so the wave looks endless. It adds original, animated flair to a website, and it's easier to do than it looks!

We'll use Code modules in the Divi Builder and an SVG generator for waves, and I'll show you how to adjust the size, shape, and speed of the animation. Follow along with the YouTube tutorial and copy the code snippets below.

The video was recorded live in Divi 4. The idea is the same in Divi 5; for the settings, follow the steps below. This tutorial was first streamed inside the Divi Stylist Academy community.

Prefer to start from a ready section? There are two free hero sections with animated wave dividers in this free layout:

How to create an animated wave section divider in Divi

Build a wave SVG, put it twice in a full-width row at the bottom of your section, and animate the row's column with CSS. Here are the steps.

Step 1: Create the SVG wave

You can use any vector graphics app to create a wavy shape, or do it online with this fun SVG Waves Generator. Here's the sample code I used:

<svg viewBox="0 0 1664 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path fill="rgba(34, 34, 34, 1)" d="M 0 0 C 241 0 241 127 482 127 L 482 127 L 482 0 L 0 0 Z" stroke-width="0"></path>
<path fill="rgba(34, 34, 34, 1)" d="M 481 127 C 640 127 640 49 799 49 L 799 49 L 799 0 L 481 0 Z" stroke-width="0"></path>
<path fill="rgba(34, 34, 34, 1)" d="M 798 49 C 1023 49 1023 172 1248 172 L 1248 172 L 1248 0 L 798 0 Z" stroke-width="0"></path>
<path fill="rgba(34, 34, 34, 1)" d="M 1247 172 C 1463.5 172 1463.5 0 1680 0 L 1680 0 L 1680 0 L 1247 0 Z" stroke-width="0"></path>
</svg>

Step 2: Add a row for the wave at the bottom of your section

Add a new one-column row to the section (give the section enough bottom padding, my layout uses 240px). In the row settings:

• Design → Sizing: Width 100%, Max Width 100%.
• Design → Spacing: top and bottom padding 0px.
• Advanced → Position: Position Absolute, Location bottom center, Vertical Offset -1px (it hides a thin line under the wave).
• Advanced → Visibility: Horizontal Overflow and Vertical Overflow Hidden.

Step 3: Add the SVG code in two Code modules

Paste the SVG code into a Code module in that row, then duplicate the module. The copy sits right next to the first one, so the wave never ends:

• Second Code module, Design → Sizing: Width 100%.
• Advanced → Position: Position Absolute, Vertical Offset 0px, Horizontal Offset 100%.

Step 4: Add the CSS animation

Open the row settings → Advanced → CSS → Free-Form CSS (Divi 4: Advanced → Custom CSS → Free-Form CSS) and paste:

selector .et_pb_code_inner path {
  fill: #222222;
}

@keyframes dl-wave {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(-50%) scale(2, .75); }
  100% { transform: translateX(-100%); }
}

selector .et_pb_column {
  animation: dl-wave 20s linear infinite;
  transform-origin: right top;
}

@media (max-width: 980px) {
  selector .et_pb_column {
    animation-duration: 10s;
  }
}

The first rule colors the wave (so you don't have to edit the SVG). The keyframes move the column with both Code modules to the left by its full width, while scale(2, .75) stretches the wave halfway through, so it looks like it's moving. Because the second copy starts where the first one ends, the loop is seamless.

How to change the wave's color, shape and speed

Change the fill color for the color, the scale() values in the keyframes for the shape, and the 20s duration for the speed.

• Color: fill: #222222; (use the same color as the next section, so the wave blends in).
• Shape: scale(2, .75) stretches the wave twice as wide and makes it 25% flatter in the middle of the loop. Try scale(1.5, .5) for a calmer wave.
• Speed: animation: dl-wave 20s …; a smaller number is faster. The media query makes it 10s on tablets and phones, where the wave is narrower.
• A second, lighter wave: duplicate the row, use a different color or a thin stroke instead of fill, a different duration, and a negative delay (for example animation: dl-wave 10s -3s linear infinite;) so the two waves never line up.

And that's it!

I hope you liked this tutorial and found it easy to follow. What other effects would you like to create with Divi and custom code? Tell me in my Divi Lovers Facebook group!

Want to learn custom CSS for Divi step by step? Check out Divi Stylist Academy.