Elements from owl-carousel slides are being displayed right before the animation starts (fadeInUp and zoomIn). They shoudn`t be visible before animations. In the first slide they behave well, but in second one , you can see they are always appearing right before css animations take place.
Check this fiddle: https://jsfiddle.net/6k8agot1/
//Start Hero slider initialize code
$(document).ready(function(){
var heroSlider = $('.owl-carousel');
heroSlider.owlCarousel({
animateOut: 'fadeOut',
animateIn: 'fadeIn',
autoplayTimeout:5000,
autoplayHoverPause: true,
loop: true,
margin: 0,
nav: false,
mouseDrag:false,
touchDrag:true,
pullDrag:false,
freeDrag:false,
dots:true,
autoplay:true,
responsive: {
0: {
items: 1
},
600: {
items: 1
},
1000: {
items: 1
}
}
});
// End Hero slider initialize code
// Start Reactivate css animation every time a slide is loaded
heroSlider.on("changed.owl.carousel", function(event){
// selecting the current active item
var item = event.item.index-2;
// first removing animation for all captions
$('h1, p').removeClass('fadeInUp');
$('a').removeClass('zoomIn');
$('.owl-item').not('.cloned').eq(item).find('h1, p').addClass(' fadeInUp');
$('.owl-item').not('.cloned').eq(item).find('a').addClass(' zoomIn');
})
});/*Start buttons*/
.btn.btn-default {
display: inline-block;
border:none;
color: #fff;
padding:15px;
border-radius: 38px;
position: relative;
background-color: #4ac8ed;
z-index: 1;
}
.btn.btn-default:after {
position: absolute;
border:none;
content: '';
top: 0;
color:white;
left: 0;
width: 100%;
height: 100%;
border-radius: 38px;
background:#2f7c93;
transition: opacity 0.3s ease-out;
z-index: 2;
opacity: 0;
}
.btn.btn-default:hover:after {
opacity: 1;
}
.btn.btn-default i {
-webkit-transition: .5s; /* For Safari 3.1 to 6.0 */
transition: .3s ease;
position:relative;
padding:0;
margin:0;
vertical-align: middle;
}
.btn.btn-default:hover i {
transform: translateX(5px);
}
.btn.btn-default b, i, span {
position: relative;
z-index: 3;
}
/*End buttons*/
.owl-theme .owl-dots .owl-dot:focus {
outline: none!important;
}
.owl-carousel .owl-item img {
pointer-events: none;
}
.padding_zero {overflow:hidden; }
.centered {
position: absolute;
margin-top:-250px;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.centered span { font-weight:700;}
.fadeInUp {
animation-duration: .8s!important;
animation-delay: .8s;
}
@keyframes zoomIn {
from {
opacity: 0;
transform: scale3d(.3, .3, .3);
}
to {
opacity: 1;
}
}
.zoomIn {
animation-name: zoomIn;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
transform: none;
}
}
.fadeInUp {
animation-name: fadeInUp;
}
.it1 .zoomIn {
animation-duration: .8s!important;
animation-delay: 1.2s;
}
.it2 .zoomIn {
animation-duration: .8s!important;
animation-delay: 1s;
}
.item1 b { font-size:14px; font-weight:300;}
.item1 h1 {font-size:65px; line-height: 65px;}
.item1 p {font-size: 20px; }
.item2 h1 {font-size: 65px; }
.item2 p { font-size:20px; }
.item2 b {font-size:14px; font-weight:300;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid padding_zero ">
<div class="row justify-content-center ">
<div class="col-12 col-md-12 ">
<div class="owl-carousel owl-theme ">
<!-- SLIDE 1 -->
<div class="item " >
<img src="http://divcake.com/temp2/images/forest1.jpg" alt="" >
<div class="centered centered1 col-10 col-md-6 col-lg-4 text-center item1 text-white">
<h1 class="animated fadeInUp mr-0 ">Start your project with us!</h1>
<p class="fadeInUp my-1 my-md-4 animated "> - Make your great ideas become reality - <br>We have the solution</p>
<div class="it1">
<a href="index.php" class="btn btn-default px-3 py-1 px-md-4 py-md-2 zoomIn animated"><b> START PROJECT</b> <i class="fas fa-caret-right "></i></a>
</div>
</div>
</div>
<!-- SLIDE 2 -->
<div class="item ">
<img src="http://divcake.com/temp2/images/proba2.jpg" alt="" >
<div class="centered text-center col-10 col-md-6 item2 text-dark ">
<p class="mb-3 " >Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
<h1 >Lorem2 ipsum dolor.</h1>
<div class="it2">
<a href="contact.php" class="btn btn-default px-3 py-1 px-md-4 py-md-2 "><b>CONTACT</b> <i class="fas fa-caret-right "></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Your issue is arising because you are making the changes after the slide transition has been completed. Using 'translate' event instead of 'changed' should help.
Try changing
heroSlider.on("changed.owl.carousel", function(event){});
to
heroSlider.on("translate.owl.carousel", function(event){});
Also keep the classes consistent across the owl carousel items, The animated class was missing in the second carousel item children.
<h1 class="animated mr-0"></h1>
<p class="my-1 my-md-4 animated"></p>
<a class=" animated"></a>