How to make animation of owl carousel inner elements?

Question

css

Recently, I asked a question similar to this, but now I'm a little more advanced in finding a solution. What I'm doing: I'm trying to animate the inner elements of the carousel while sliding. Here is the code that I got:

var owl = $('.owl-carousel');
owl.owlCarousel();
owl.on('changed.owl.carousel', function(event) {
  $(".header-text").removeClass("slider-text-anim");
  if ( $(".owl-item").hasClass("active") ) {
    $(".header-text").addClass("slider-text-anim");
  }
  else {
    $(".header-text").removeClass("slider-text-anim");
  }
});

But the problem is that the class "slider-text-anim" will never be removed, while some slide always has the active class. Help with solving the problem, how can I make it so that this particular slide that was active right now and not the one that became was checked? Adding a class to every item is a bad idea (and not possible). If you know the answer, and also faced such a problem, I ask you to help.

Answer 1

There are scripts in which this is already implemented, perhaps it is worth using a ready-made one?
For example:
bayguzin.ru/demo/ParallaxContentSlider
jacksbox.de/stuff/jquery-fractionslider
https://www.sequencejs.com/
Actually, you can search for similar ones by query " parallax slider "

Answer 2

Animate with css using the active class.