Owl Craousel + Animate.css - Animation dont work

Question

I'm using owl carousel + animate.css to achieve an effect for my carousel but the code just doesn't work for me.

I want the first card to zoom out and disappear as the second card slides in.

Here is what I have tried so far.

https://codepen.io/whoisda/pen/eYEaVGd

$(document).ready(function() {
 
  $("#owl-example").owlCarousel({
    navigation: true,
    navigationText: ["", ""],
    singleItem: true,
    loop: true,
    autoplay: true,
    animateIn: 'animate__fadeIn',
    animateOut: 'animate__zoomOut',
    items:4,
    margin:30,
    stagePadding:100,
    smartSpeed:400,
    slideSpeed: 300
  });
  
});

I'm using : animateOut: 'animate__zoomOut',

This is the design/animation should look something like this:

https://i.sstatic.net/nUHYY.jpg

Answer 1

Based on the plugin document: You can not use animate with more than one item is displayed

if U use

$(document).ready(function() {
 
  $("#owl-example").owlCarousel({
    navigation: true,
    navigationText: ["", ""],
    singleItem: true,
    loop: true,
    autoplay: true,
    animateIn: 'animate__fadeIn',
    animateOut: 'animate__zoomOut',
    items:1,
    margin:30,
    stagePadding:100,
    smartSpeed:400,
    slideSpeed: 300
  });
  
});

it well be fine But show just one item

Visit https://owlcarousel2.github.io/OwlCarousel2/demos/animate.html

Animate functions work only with one item and only in browsers that support perspective property.