Using Built-In Divi Animation

Animation can be a fun way to reveal content on your site. When used thoughtfully, it can encourage your use to explore the content of your page. When used haphazardly or excessively it can distract your audience from your content. There is definitely an art to finding the right balance. Experimenting with animation is easy on the UARK network, given that our theme has built in animation options that can be applied by module, row, or section.

Animation Style

Divi has seven animation options that can be found in module, row, or section settings under “Design.” The available effects are: Fade, Slide, Bounce, Zoom, Flip, Fold, or Roll.

Animation Options

Once you select an animation style, you have additional options for customization. You can choose whether to repeat the animation, how long it appears, add a delay or opacity, and the speed of the effect.

Module Animation

Look below for an example of individual module animation. 

Row Animation

Look below for an example of individual row animation. 

Text Module

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac sapien et libero eleifend convallis. Nunc vitae risus sit amet libero condimentum viverra quis egestas risus. Sed vel augue sed augue mollis aliquet sed sit amet justo. Fusce eu orci nunc. Vestibulum vitae imperdiet nunc, ac porta libero. Duis nunc velit, interdum nec nisi id, bibendum dapibus augue. Vestibulum volutpat volutpat lacus, in varius nibh lacinia eget. Mauris vitae urna turpis. Cras varius placerat lectus, finibus commodo est 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac sapien et libero eleifend convallis. Nunc vitae risus sit amet libero condimentum viverra quis egestas risus.
Testimonial

Teacher, City ISD

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac sapien et libero eleifend convallis. Nunc vitae risus sit amet libero condimentum viverra quis egestas risus. Sed vel augue sed augue mollis aliquet sed sit amet justo. Fusce eu orci nunc. Vestibulum vitae imperdiet nunc, ac porta libero. Duis nunc velit, interdum nec nisi id, bibendum dapibus augue. Vestibulum volutpat volutpat lacus, in varius nibh lacinia eget. Mauris vitae urna turpis. Cras varius placerat lectus, finibus commodo est 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac sapien et libero eleifend convallis. Nunc vitae risus sit amet libero condimentum viverra quis egestas risus.
Testimonial

Officer, City ISD

Section Animation

Look below for an example of individual section animation. 

7 + 2 =

In Conclusion

Hopefully this post helped introduce you to some of the features of built-in animation. Look for more posts on specialized uses of animation in the future. If you have any questions or comments, please let us know at wpress@uark.edu!