How to animate elements (inside the slide) when scrolling the owl carousel of the slide, through owl carousel events, or manually?

Question

css

How to make an animation when scrolling the owl carousel of a slide, at first, not knowing about the events, I tried to check for the presence of the active class on the slide, but for some reason it does not work.

$(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("У элемента не задан класс");	    
  }
});

The slider item code itself:

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

Well, the CSS code of the class that I add:

.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);
    }
}

Help me figure out what the problem is, I don’t know how to use the slider events themselves (I know js superficially, until that time there was no need for great knowledge).
You need to animate the text itself, not the slide, so I have 3 types of text, and I want to give each text a separate animation.

Answer 1

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