Adding Fly-in Animations To Any Divi Section, Row and Module
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.

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)

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<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>