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');
            } else {
                $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.


DISCLOSURE: I may be an affiliate for some of the products that I recommend. If you purchase those items through my links I will earn a commission which helps cover the cost of the free resources we provide. If you ever have any questions about my affiliations, please do not hesitate to ask..

Pin It on Pinterest

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!