See the example second function from here >>> https://codepen.io/SitePoint/pres/warKXE

Animate from top and bottom jquery.js

 // This function for scroll from bottom animation
        if ($(window).width() >  767){

            var $animation_elements = $('.animate-from-bottom');
            var $window = $(window);

            function check_if_in_view() {
                var window_height = $window.height();
                var window_top_position = $window.scrollTop();
                var window_bottom_position = (window_top_position + window_height);

                $.each($animation_elements, function() {
                    var $element = $(this);
                    var element_height = $element.outerHeight();
                    var element_top_position = $element.offset().top;
                    var element_bottom_position = (element_top_position + element_height);

                    //check to see if this current container is within viewport
                    if (element_top_position <= window_bottom_position) {
                        $element.addClass('in-view');
                    } else {
                        $element.removeClass('in-view');
                    }
                });
            }

            $window.on('scroll resize', check_if_in_view);
            $window.trigger('scroll');
        }  
        // End animation function



  // This function scroll from bottom scroll down and top same effect

	var $animation_elements = $('.animation-element');
	var $window = $(window);

	// Event handler to listen to scroll and resizing events
	$window.on('scroll resize', check_if_in_view);

	// detection function called initially when the DOM is ready and then every time we resize or scroll. 
	function check_if_in_view() {
		// current height and top and bottom position of window to get the area we are looking at
		var window_height = $window.height();
		var window_top_position = $window.scrollTop();
		var window_bottom_position = (window_top_position + window_height);

		$.each($animation_elements, function() {
			var $element = $(this);
			// For each of these elements we collect its height and top and bottom position so we know where it is on the page
			var element_height = $element.outerHeight();
			var element_top_position = $element.offset().top;
			var element_bottom_position = (element_top_position + element_height);

			//check to see if this current container is within viewport
			if ((element_bottom_position >= window_top_position) &&
			  (element_top_position <= window_bottom_position)) {
			 	 $element.addClass('in-view');
			} else {
			  $element.removeClass('in-view');
			}
		});
	}

	$window.on('scroll resize', check_if_in_view);
	$window.trigger('scroll');
	
	//End this function

	// Animate from bottom and animate from top two state function 
	if( $('.animation-element').length){
            
            var $animation_elements = $('.animation-element');
            var $window = $(window);

            // Event handler to listen to scroll and resizing events
            $window.on('scroll resize', check_if_in_view);

            // detection function called initially when the DOM is ready and then every time we resize or scroll. 
            function check_if_in_view() {
                // current height and top and bottom position of window to get the area we are looking at
                var window_height = $window.height();
                var window_top_position = $window.scrollTop();
                var window_bottom_position = (window_top_position + window_height);

                $.each($animation_elements, function() {
                    var $element = $(this);
                    // For each of these elements we collect its height and top and bottom position so we know where it is on the page
                    var element_height = $element.outerHeight();
                    var element_top_position = $element.offset().top;
                    var element_bottom_position = (element_top_position + element_height);

                    //check to see if this current container is within viewport
                    if ( (element_bottom_position >= window_top_position) && (element_top_position <= window_bottom_position)) {
                         $element.addClass('in-view');
                            $element.removeClass("animate-from-top")
                        
                    } 
                    else if( (element_top_position <= window_bottom_position) ){
                        $element.addClass("animate-from-top")
                        $element.removeClass('in-view');
                    }
                    else {
                      $element.removeClass('in-view');
                    }
                });
            }


            $window.on('scroll resize', check_if_in_view);
            $window.trigger('scroll');
        }
        
	//End this animate scroll function


// Add event when scrollTop middle position of element
var $position_elements = $(".footer-upper-section");
function check_position() {
    var window_height = $window.height();
    var window_top_position = $window.scrollTop();
    var window_bottom_position = (window_top_position + window_height);

    $.each($position_elements, function() {
	var $element = $(this);
	var element_height = $element.outerHeight()/2;
	var element_top_position = $element.offset().top;
	var element_bottom_position = (element_top_position + element_height);

	//check to see if this current container is within viewport
	if (element_bottom_position >= window_top_position){
	    //$element.addClass('stratParallax');
	    //$('.footer-section').removeClass('expandline');
	} else {
	    //$element.removeClass('stratParallax');
	    $('.footer-section').addClass('expandline');
	}
    });
}

$window.on('scroll resize', check_position);
$window.trigger('scroll');