Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Divi has built in some cool fly-in animations into it’s stylesheet for it’s Image Module. So in the module settings you have the options to have the image fade-in or fly-in from the right, left, top, or bottom.

And on the Divi Nation Quick Tip Episode #10, Nathan Weller gave us a small jquery script to trigger page element animations on both the up and down scroll–whereas by default they would only trigger on the down scroll.

And so here we are going to combine his jquery with the built in css to animate any section, row or module to make a cool animated website that feels alive. You can check out the live demo here.

 

Lets Get Started

1. First you need to grab this code and copy it to your clipboard

 

<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');
                $element.addClass('et_animated');
            } else {
                $element.removeClass('et-animated');
                $element.removeClass('et_animated');
            }
        });
    }
  
    $window.on('scroll resize', check_if_in_view);
})(jQuery);
</script>

 

2. Now go to Divi Theme Options > Integration and paste the code into the section that says: Add code to the < body > (good for tracking codes such as google analytics)

001

 

 

Now for adding the CSS Classes

3. Now you can go to your page and start populating the Modules. Below are the CSS Class groups for each animation.

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

 

4. Now open up the Module Settings and paste one of the above class groups.

Divi Animations 002

 

 

5. Now just go through all your modules and start adding different animations.

 

Notes

Now I prefer to animate the individual modules but you can animate rows and sections as well. For example on a new landing page I created for Monterey Premier, I created unique sections that look more like binder tabs that stick out from the left. So it made sense to add an animation to those particular sections as if they were flying in from the left.

You can see that page here: Divi Expert Landing Page

 

And that’s it! Have fun!


Well that’s all for now. I hope you find this article useful.


The following two tabs change content below.
Geno is an entrepreneur who has been designing websites since 1996. He also enjoys all things design, traveling, hanging out with friends, encouraging other believers, and experimenting with new technologies. When not doing any of the above, you can find Geno blogging or writing Divi customization tutorials here on Quiroz.co.

©2012-2019 Geno Quiroz | Teach Learn Build Love | Divi Expert ServicesJohn 3:16

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest