Using Divi’s Animations to Unfold Content with Sliding Images

NOTE: This animation simply slides the image from right to left. The key animation setting here is the intensity. Setting the animation intensity to 20% shortens the distance the image must travel to get to its final resting place.

NOTE: This animation gives the appearance of the text folding out from behind the image as the image slides to the left.

z-index: 999;

z-index: 999;

Since our image is going to be on the right column, we need that column to stay on top of the text animating on the left.

Save Settings

Update Image Module and Call to Action Module in the Second Row

Next drag the image module to the right column and drag the divider module and call to action module to the left column.

This section is going to have a slightly different column structure. Click the Change Column Structure Row Icon (next to the duplicate row icon) and select a two-thirds one-third column layout.

Now all we need to do is revisit each of the modules inside of the row and make a few changes.

First, update the Divider Module settings as follows:

Under the Design tab…

Module Alignment: Right
Animation Direction: Left

Save Settings

Next update the Call to Action Module Settings as follows:

Title: “Speaks For Itself”
Text Orientation: Right
Header Text Alignment: Right
Width: 700px (type this in)
Animation Direction: Left

Save Settings

Next update the Image Module in the right column with your new 790×880 image.

That’s it for section 3!

Check out your result.

Building Section 4 of the Demo

Section 4 takes the design of the Image Module to another level with a few advanced CSS tricks. And, stacking text modules to fold them on a hinge is combines well with the delivery. Let’s dive in.

Using the Visual Builder, add a regular section with a two-column (one-half one-half) row. Before we add our first module, let’s add a background color to our section. Click to edit the section settings.

Under the content tab, select the background color tab and enter the color #262938.

Save Settings

Add the First Text Module

In the left column add a Text Module and update the Text Settings as follows:

Under the Content tab…

Enter the following html in the text tab of the content box:

<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>

Under the Design tab…

Text Color: Light
Header Font: Playfair Display, Bold (B)
Header Font Size: 38px
Header Line Height: 1.3em
Custom Margin: 20px Bottom
Animation: Fold
Animation Direction: Up

Add the Second Text Module

Next add another text module directly under the current text module. Then update the settings as follows:

Under the Content tab…

Content: “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida. Sed nec purus tempus, sagittis mi id, efficitur nisl. Sed nec purus tempus, sagittis mi id, efficitur nisl.”

Under the Design tab…

Text Color: Light
Text Font Size: 18px
Text Text Color: rgba(255,255,255,0.66)
Text Line Height: 1.9em
Custom Margin: 40px Bottom
Animation Style: Fold
Animation Direction: Down
Animation Delay: 150ms

Save Settings

Add the Button Module

Add a button module under the last text module and update the settings as follows:

Button Text: Learn More
Button URL: #

Use Custom Styles for Button: YES

Button Text Size: 15px
Button Text color: #01254c
Button Background Color: #ffffff
Button Border Radius: 0px
Button Font: Bold (B), Uppercase (TT)

Custom Padding: 10px Top, 30px Right, 10px Bottom, 30px Left

Animation Style: Slide
Animation Direction: Down
Animation Duration: 1600ms
Animation Delay: 150ms
Animation Intensity: 20%

Save Settings

Add Image Module to Right Column

That’s it for that column. Now we need to add an Image Module to the right column. Then update the settings as follows:

Under the Content tab…

Image URL: [insert your 600×400 image]

Under the Design tab…

Force Fullwidth: YES

Animation Style: Slide
Animation Direction: Right
Animation Delay: 800ms
Animation Intensity: 20%

Save Settings

Update Row Settings

Now click to edit the Row Settings and update the following:

Under the Design tab…

Use Custom Width: YES
Custom Width: 1366px

Custom Padding: 27px Top, 0px Right, 170px Bottom, 0px Left
Column 1 Custom Padding: 6% Top

Under the Advanced tab…

Add the following custom CSS to the Column 1 Main Element box:

z-index: 999;

This css adds makes sure the text stays on top of the image during animation.

Then add the following custom CSS to the Column 2 Main Element box:

transform: scale(1.3);
transform-origin: top right;

This css adds a clever design to scale up (increase) the size of everything in column 2 (the image). The transform origin property tells the column to scale from the top right of the row. This creates a slight overlapping of the text on the left and the image.

Save Settings

Duplicate and Update your Row

Now just like we did in section 3, we are going to duplicate the row. After duplicating the row, drag the 2 text modules and the button module from the left column into the right. And drag the image module from the right column to the left. Now all we need to do is make some minor updates to our duplicated row and its contents.

First, let’s update the row settings with the following:

Under the Design tab…

Custom Padding: 40px Top, 0px Right, 40px Bottom, 0px Left
Column 1 Custom Padding: [restore to default; erase 6% Top]
Column 2 Custom Padding: 6% Top

Under the Advanced tab…

Erase the custom CSS from the Column 1 Main Element Box and the Column 2 Main Element Box. This was carried over from the duplication and we don’t need it anymore.

Update Image Module

Next, update the Image Module (now in the left column) with the following:

Under the Content tab…

Image URL: [insert your new 600×400 image]

Under the Design tab…

Animation Direction: Left