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
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?
The post Floating images with looping Divi animations appeared first on Divi Theme Examples.
