How to Create Overlapping Animations on Delay with Divi

A big part of your website’s success depends on whether or not you’re able to impress your visitors. Not only with your products or services, but also with the way you communicate and how well-designed your website is. Because let’s face it, websites are often first impressions. And similar to any other kind of first impression, you want it to leave a good aftertaste.

Now, if you’re looking for a unique way to put some of your content in the spotlight, creating subtle overlapping animations might be just what you are looking for. These subtle overlapping animations are kind of like a slideshow for your visitors. They don’t have to scroll or click on anything, the content just shows up in an elegant way.

Let’s get to it!

Preview

Before we dive into the tutorial, let’s take a quick look at the outcome across different screen sizes.

Desktop

overlapping animations

Mobile

overlapping animations

Approach

We’ll start off by adding all the design elements we need in a vertical order, without the overlap
As we’re adding all the design elements, we’ll also add custom animations with a certain animation delay
These animation delays will only make sense once you’ve gone through the last part of the tutorial which focuses on overlaps
An important part of this tutorial is using shaped Divider Modules with the same background color as the section to make row content ‘disappear’ on delay
You can apply this technique to any kind of design you’re working on once you understand the different steps that are necessary to make the approach work

Let’s Start Creating!

Add New Section

Background Color

Start by creating a new page or opening an existing one and add a regular section to it. Open the section settings and add a background.

Background Color: #f3f3ec

overlapping animations

Add Row #1

Column Structure

Continue by adding a new row to your section using the following column structure:

overlapping animations

Sizing

Without adding any modules yet, open the row settings and allow the row to take up the entire width of the screen. The reason why we’re doing this is to get rid of all the default pixel spacing. In the upcoming steps, we’ll add all the space we need using a viewport unit instead.

Make This Row Fullwidth: Yes
Use Custom Gutter Width: Yes
Gutter Width: 1

overlapping animations

Add Text Module to Column

Add H2 Content

Let’s start adding modules! The first module we need is a Text Module with some H2 content. Remember that this module will ‘disappear’ after a few seconds, so you want to keep it short, relevant and rememberable.

overlapping animations

H2 Text Settings

Then, go to the design tab and modify the H2 text settings.

Heading 2 Font: Poppins
Heading 2 Text Color: #333333
Heading 2 Text Size: 5vw

overlapping animations

Spacing

Create the space you want using some left and right padding in the spacing settings.

Left Padding: 15vw
Right Padding: 39vw

overlapping animations

Add Divider Module to Column

Visibility

On to the next module, which is a Divider Module. We’re using this module to make the Text Module ‘disappear’. There are four things we’ll need for that; a background color (that is in the same color as the section so you can’t notice it), enough padding (to make sure you can overlap all the content in the previous module), a vertical overlap (to cover up the entire module area), and an animation delay (to give the first module time to have its shine before taking over). Once you add the Divider Module, make sure you disable the ‘Show Divider’ option.

Show Divider: No

overlapping animations