Floating images with looping Divi animations

Divi comes with a built-in Animations tab that allows you to apply a range of animations to any section, row, column, or module.

By combining a single line of CSS together with the built-in Divi animation options we can create some subtle looping animation effects for your website.

In this post, we will look at creating the ever-popular floating multi-image animation as shown in the video below.

Prefer to skip the info and tutorial and get the layout?

You can download the Divi layout file at the bottom of the post.

What are the default Divi animations?

By default in Divi, you can select from 7 animation styles which include Fade, Slide, Bounce, Zoom, Flip, Fold, and Roll.

Within each animation style is a range of options including an option for Animation Repeat which can either be set to Once or Loop.

The loop option is a one-way continuous loop, which means that when the animation has ended, it will begin the loop from the original starting point. This causes a jumping effect. (this can be seen in the 3 left logos in the image below)

Create a smooth looping animation with CSS

To use the built-in Divi animations for creating smooth looping animations you can add a single line of CSS to your Custom CSS area in the advanced tab of the element you are animating.

The CSS used is animation-direction: alternate;

By adding the animation direction CSS, the animation will play once forward as it does by default, but will then play the next loop in reverse, so the transition between loops is smooth.

How to create floating multi-image animation with Divi image modules

Step 1. Add a new section with 1 row and 2 columns. In the left-hand column add 3 image modules.

Image 1 will be the middle image and has the following module settings;

• Design > Sizing > Width > 60%
• Design > Sizing > Module Alignment > Center
• Design > Box Shadow > 2nd option
• Advanced > Position > Z-index > 99

Image 2 will be the left image and has the following module settings;

• Design > Sizing > Width > 35%
• Design > Box Shadow > 2nd option
• Design > Transform > Transform Rotate > -7deg, 0deg, 0deg
• Design > Filter > Blur > 1%
• Advanced > Position > Absolute
• Advanced > Position > Location > Center Left

Image 3 will be the right image and has the following module settings;

• Design > Sizing > Width > 35%
• Design > Box Shadow > 2nd option
• Design > Transform > Transform Rotate > 7deg, 0deg, 0deg
• Design > Filter > Blur > 1%
• Advanced > Position > Absolute
• Advanced > Position > Location > Center Right

Step 2. Add the animations with the built-in animation settings on each Divi image module

For Image 1, edit the following animation settings;

• Design > Animations > Animation Style > Slide
• Design > Animations > Animation Direction > Up
• Design > Animations > Animation Duration > 3500ms
• Design > Animations > Animation Intensity > 4%
• Design > Animations > Animation Starting Opacity > 100%
• Design > Animations > Animation Repeat > Loop

For Image 2, edit the following animation settings;

• Design > Animations > Animation Style > Slide
• Design > Animations > Animation Direction > Up
• Design > Animations > Animation Duration > 1750ms
• Design > Animations > Animation Intensity > 2%
• Design > Animations > Animation Starting Opacity > 100%
• Design > Animations > Animation Repeat > Loop

For Image 3, edit the following animation settings;

• Design > Animations > Animation Style > Slide
• Design > Animations > Animation Direction > Down
• Design > Animations > Animation Duration > 1750ms
• Design > Animations > Animation Intensity > 3%
• Design > Animations > Animation Starting Opacity > 100%
• Design > Animations > Animation Repeat > Loop

Step 3. Add the custom CSS into the advanced settings on each Divi image module

For Image 1, 2, and 3, add the following CSS into the Advanced settings tab;

• Advanced > Custom CSS > Main Element > animation-direction: alternate;

Download the floating layout JSON

Download JSON file 

Final thoughts

Adding this 1 line of CSS allows you to create any number of interesting looping animation effects that can be used to draw attention to certain elements on your website or simply make a page more interesting for your users.

The floating or bobbing image effect in the animation above has been seen on a number of Divi (and non-Divi) websites lately and is also one of the many options available in the best-selling Divi Supreme Pro plugin.

As with any animations, it is best to be overly subtle and not make your site visitor’s heads spin!

What have you created using this cool Divi animation?