While Divi animations are included in modules such as images, blurbs, and sliders, other sections, rows, and modules does not have them in their design panel. Thankfully, Divi has built in these animations in its stylesheet, so users can easily add a fade-in or fly-in from the top, bottom, left, and right to any elements on the website.

This post will cover the following:

  1. how to add in these animation codes/classes, and in addition,
  2. how to add other animations with animate.css on Divi and other websites,
  3. enable animate.css animations on scroll with wow.js
  4. enable Divi animations on mobile,
  5. and enable animations for both the up and down scroll.

Why Use Animations

Web animations, when used appropriately, can create a visually engaging experience for users. This can come in the form of fly-in/fade-in animation when an object enters into view, or movement/micro-interactions when a user hovers or clicks on a particular object. The former encourages users to look at it, while the latter being useful in indicating that the object could be clicked on.

Web animations, when used appropriately, can encourage a user to look at it, or to indicate that an object can be interacted with.

Add Divi Animations to Any Elements

Since Divi has already included animations in its stylesheet, simply add the corresponding classes to any element in the CSS Class box in the Advanced Tab.

The classes are:

  • et_pb_animation_top et-animated et-waypoint
  • et_pb_animation_bottom et-animated et-waypoint
  • et_pb_animation_right et-animated et-waypoint
  • et_pb_animation_left et-animated et-waypoint
  • et_pb_animation_fade_in et-animated et-waypoint

 

Digital Marketing and Design Blog - Divi Tutorials - Add Divi Animations to any Section Module and Row - Leow Hou Teng

Add Animation Class in the Advanced Tab

Continue Reading

NOTE: If a class is already written in the box, add a space between the different classes. Both of these classes will be added to the element.

Add Other Animations with Animate.CSS

Digital Marketing and Design Blog - Divi Tutorials - Animate CSS Website - Leow Hou Teng

Animate.CSS Website

Animate.CSS is an open source list of animations written in CSS by Daniel Eden. The animation samples can be viewed on the site’s dropdown list. To use these codes, users can:

  1. Download a copy of the codes and upload it to the site’s directory and include the stylesheet to the < head >
  2. Instead, use the remote version (hosted by CDNJS)
  3. PREFERRED METHOD: Copy the relevant code and add it to the site’s existing style.css

Method 1 (Good to Know)

If the entire or most of the stylesheet animations are needed, follow these steps.

  1. Download a copy of animate.css from here.
  2. Add the stylesheet into the theme’s/site’s directory.
    1. Log in to the server with FileZilla.
    2. For Divi users, by default, toggle to public.html > (Site/Subdomain) > wp-content > themes > Divi or Divi Child Theme.
    3. Drop the file into the folder.
  3. Add the script below to the website’s < head >.
    1. For Divi users, toggle to Divi Theme Options > Integration and add the codes.
  4. Refer to Animate.css site for reference and add the class ‘animated‘ and the animation needed, to the Advanced tab in Divi. Remember to key in the CamelCase letters correctly.

Include the stylesheet in Divi Theme Options > Integration > ‘Add code to the < head > of your blog’.

<link rel="stylesheet" href="animate.min.css">

 

Digital Marketing and Design Blog - Divi Tutorials - Add codes to Divi Theme Options Integration - Leow Hou Teng

Divi Theme Options > Integration > Add Code to < head > or < body >

 

Method 2 (Easier Method)

As the stylesheet is hosted on a content delivery network (CDN) such as CDNJS, users can simply call it without having to add the file into the server. This is a preferred method since it will lessen the load on the server, resulting in faster loading speed of the website. However, note that if the CDN fails, the site will also be affected.

The steps are similar to method 1:

  1. Download a copy of animate.css from here.
  2. Add the script below to the website’s < head >.
    1. For Divi users, toggle to Divi Theme Options> Integration and add the codes.
  3. Refer to Animate.css site for reference and add animation class ‘animated‘ and the animation you want (in CamelCase) in the Advanced tab for any Divi element.

 

Include the stylesheet in Divi Theme Options > Integration > ‘Add code to the < head > of your blog’.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

 

READ  How to Add Project Title on Divi Filterable Portfolio Grid Image on Hover

Method 3 (Best Approach)

Adding an additional stylesheet or calling it from a CDN slows down the loading of a site, giving users a less favourable experience and potentially pulling down SEO ranking. A better way is to add only the required codes to an existing stylesheet. In addition to loading one stylesheet less, fewer lines of code will be added to the site, rather than the entire 1580+ lines of CSS!

Steps:

  1. Download a copy of animate.css
  2. Open the stylesheet and copy the class ‘animated’.
  3. Search for the required CamelCase animation name with cmd+F(Mac) or ctrl+F (PC).
  4. Copy the @keyframe and animation class (refer to a code sample below)
  5. Paste it to the site’s stylesheet. For Divi users, add it in the Custom CSS tab in Divi Theme Options.
  6. Call up the classes ‘animated‘ and ‘bounceIn‘ in the Advanced tab.

 

.animated{animation-duration:1s;animation-fill-mode:both}

@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }

  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    transform: scale3d(.97, .97, .97);
  }

  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

.bounceIn {
  animation-name: bounceIn;
}

Code Sample for bounceIn. The class bounceIn can be added to any Divi element when these codes are added to the custom CSS box.

The “animated” class is required for any element you want to animate. The “bounceIn” class is but one of many different keyframe effects you can apply.

Animate on Scroll with wow.js

In order for animate.css to activate only when a user scrolls to the object, the wow.js must be added to a child theme. Elegant theme wrote an article explaining how to include wow.js into the Divi site.

Digital Marketing and Design Blog - Divi Tutorials - Add wow js to animate on scroll - Leow Hou Teng

Animate on Scroll with wow.js

Enable Divi Animations on Mobile

Divi animations are disabled on mobile for images and blurbs, possibly to speed up mobile page loading. To enable it, paste the codes below in Divi Theme Options > Integration > ‘Add code to the < head > of your blog’ and animations will be loaded on mobile.

<script>
(function($) {
   $(document).ready(function() {
      function check_mobile() {
         if ($(window).width() < 981 ) {
            $("body").removeClass('et_mobile_device');
         }
      }
      check_mobile();
      $(window).resize(check_mobile);
   });
})(jQuery);
</script>

 

Enable Divi Animations for Up & Down Scroll

For unknown reasons where animations need to be loaded for all Up and Down scroll, or for all Down scrolls, copy and paste the following codes and place it in Divi Theme Options > Integration > ‘Add code to the < body >

NOTE: Use this with caution as too many animations may be annoying and negatively impacts user experience.

For all Up and Down scroll:

<script>
(function($) {
    var $animation_elements = $('.et-waypoint'),
        $window = $(window);
  
    function check_if_in_view() {
        var window_height = $window.height(),
            window_top_position = $window.scrollTop(),
            window_bottom_position = (window_top_position + window_height);
  
        $animation_elements.each(function() {
            var $element = $(this),
                element_height = $element.outerHeight(),
                element_top_position = $element.offset().top,
                element_bottom_position = (element_top_position + element_height);
  
            //check to see if this element is within viewport
            if ((element_bottom_position >= window_top_position) && (element_top_position <= window_bottom_position)) {
                $element.addClass('et-animated');
            } else {
                $element.removeClass('et-animated');
            }
        });
    }
  
    $window.on('scroll resize', check_if_in_view);
})(jQuery);
</script>

 

For all Down scroll:

<script>
(function($) {
    var $animation_elements = $('.et-waypoint'),
        $window = $(window);
  
    function check_if_in_view() {
        var window_height = $window.height(),
            window_top_position = $window.scrollTop(),
            window_bottom_position = (window_top_position + window_height);
  
        $animation_elements.each(function() {
            var $element = $(this),
                element_height = $element.outerHeight(),
                element_top_position = $element.offset().top,
                element_bottom_position = (element_top_position + element_height);
  
            //check to see if this element is within viewport
            if (element_top_position <= window_bottom_position) {
                $element.addClass('et-animated');
            } else {
                $element.removeClass('et-animated');
            }
        });
    }
  
    $window.on('scroll resize', check_if_in_view);
})(jQuery);
</script>

Hou Teng

Hou Teng

Art Director, Digital Marketing Strategist at LeowHouTeng.com
Hou Teng is a Singaporean graphic designer, specialising in both print and web. After graduating from Nanyang Technological University, School of Art, Design & Media, he has worked in advertising and launched an education startup as a side project. He has also worked briefly in a renovation start-up in Shen Zhen, China. While his strengths are in branding and layout design, he is also skilled in digital imaging, web design (HTML & CSS), WordPress content management and administration, search engine optimisation, and digital marketing.
Hou Teng