Themes: Fly-in and fly-out Animations

Fly-in and fly-out Animations

Last Updated: 1 month ago

Divi: Fly-in and Fly-out Animations

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.

Artikel här

The code

<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>

Add code to the < body > (good for tracking codes such as google analytics)

Adding the css classes

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

Fly-in and fly-out Animations