Owl-Carosuel amination

html-animation.html

<h1 data-animation="fadeInUp" data-duration=".4s">..</h1>
<p data-animation="fadeInUp" data-delay=".4s" data-duration=".4s">...</p>
<div class="slider-button" data-animation="fadeInUp" data-delay=".8s" data-duration=".8s">
  <a href="#" class="edu-button">Enroll Now</a>
</div>

owl-animation.js

(function ($) {
    'use strict';

    //Owl-Carousel Slider Functions
	if ($.fn.owlCarousel) {
		//Owl-Carousel Slider Activation Functions
	    var heroSlider = $('.hero-area');
	    heroSlider.owlCarousel({
	        items: 1,
	        loop: true,
	        animateIn: 'fadeIn',
		    animateOut: 'fadeOut',
	        smartSpeed: 1000,
	        autoplayTimeout: 5000,
	        mouseDrag: false,
	        touchDrag: false,
	        autoplay: true,
	        nav: true,
	        navText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],
	        responsive: {
	          0: {
	            items: 1,
	          },
	          480: {
	            items: 1,
	          },
	          768: {
	            items: 1,
	          }
	        }
      	});
      	//Owl-Carousel Translate Function
	    heroSlider.on('translate.owl.carousel', function(){
	        var layer = $("[data-animation]");
	        layer.each(function() {
	            var animation_name = $(this).data('animation');
	            $(this).removeClass('animated ' + animation_name).css('opacity', '0');
	        });
	    });
	    //Owl-Carousel Delay Function
	    $("[data-delay]").each(function () {
	        var animation_delay = $(this).data('delay');
	        $(this).css('animation-delay', animation_delay);
	    });
	    //Owl-Carousel Duration Function
	    $("[data-duration]").each(function () {
	        var animation_duration = $(this).data('duration');
	        $(this).css('animation-duration', animation_duration);
	    });
	    //Owl-Carousel Translated Function
	    heroSlider.on('translated.owl.carousel', function () {
	        var layer = heroSlider.find('.owl-item.active').find("[data-animation]");
	        layer.each(function () {
	            var animation_name = $(this).data('animation');
	            $(this).addClass('animated ' + animation_name).css('opacity', '1');
	        });
	    });
    };

})(jQuery);