Как сделать анимацию элементов(внутри слайда) при прокрутке owl carousel слайда, через события owl carousel, или вручную?

Question

[Rodge]

Как сделать анимацию при прокрутке owl carousel слайда, по началу не зная о событиях я пробовал проверять на наличие класса active у слайда, но почему-то не работает.

$(document).ready(function(){
	$("#header-text-slider").removeClass("slider-text-anim");
	if ( $(".owl-item").hasClass("active") ) {
	    $("#header-text-slider").addClass("slider-text-anim");
	    alert("У элемента задан класс");
	}
	else {
	    $("#header-text-slider").removeClass("slider-text-anim");
	    alert("У элемента не задан класс");	    
	}
});

Сам код айтема слайдера:

<div class="slider-img-header" style="background-image: url(img/slider/3.jpg);">
				<div class="slider-mask-header">
					<div id="header-text-slider" class="header-text displ-flex flex-items-center flex-justify-center full-screen-height min-height-600">
						<div class="text-align-center">
							<h1 class="white h1-header">The best atmosphere</h1>
							<h3 class="h3-header header-text-about padding-tb-45 white margin-center">Atmosphere that was created by the best designers</h3>
							<div class="margin-tb-15">
								<a href="#" class="button-header">Boock a table</a>								
							</div>
						</div>
					</div>
				</div>	
			</div>

Ну и СSS код класса который я добавляю:

.slider-text-anim {
    animation-name: slider-text-anim;
    animation-duration: .5s;
    animation-timing-function: linear;
}

@keyframes slider-text-anim
{
    from
    {
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        -o-transform: scale(0);
        transform: scale(0);
    }
    to
    {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
}

Помогите разобраться в чём проблема, самими событиями слайдера я пользоваться не умею(js знаю поверхностно, до этого времени не было в потребности больших знаний).
Анимировать нужно сам текст, а не слайд, вот у меня есть 3 вида текста, и каждому тексту я хочу давать отдельную анимацию.

Answer 1

[Localhost]

animateOut: 'slideOutDown',
    animateIn: 'flipInX',

Comments

[Rodge]

Мне нужно сделать анимацию не слайда, а элементов внутри слайда.

[one_day]

попробуйте исполнять свой код по событию:

$('.customNextBtn').click(function() {
//код
})

$('.customPrevBtn').click(function() {
//код
})

[one_day]

https://codepen.io/one_day/pen/MvBaEe

[Localhost]

Можно так
или можно так - подключить стили от https://daneden.github.io/animate.css/
и для нужного блока или элемента задать класс
class="animated bounce"