title: How to add animation on owlCarousel slider contents
body: <p>How to animate each content layer with selected css animation with owlCarousel slide?</p>
  
  <p>Here what I did, but I can't make it work properly.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="owl-carousel owl-theme"&gt;
      &lt;div class="slide-item-1"&gt;
          &lt;div class="layer layer1"&gt;
              &lt;div data-animate="animated fadeInLeft"&gt;
                  &lt;h1&gt;I'm layer 1&lt;/h1&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="layer layer2"&gt;
              &lt;div data-animate="animated fadeInLeft"&gt;
                  &lt;h2&gt;I'm layer 2&lt;/h2&gt;
              &lt;/div&gt;  
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="slide-item-2"&gt;
          &lt;div class="layer layer1"&gt;
              &lt;div data-animate="animated fadeInLeft"&gt;
                  &lt;h1&gt;I'm layer 1&lt;/h1&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="layer layer2"&gt;
              &lt;div data-animate="animated fadeInLeft"&gt;
                  &lt;h2&gt;I'm layer 2&lt;/h2&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="layer layer3"&gt;
              &lt;div data-animate="animated fadeInLeft"&gt;
                  &lt;h2&gt;I'm layer 3&lt;/h2&gt;
              &lt;/div&gt;  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code> jQuery(document).ready(function($) {
      $('.owl-carousel').owlCarousel({
          items:1,
          dots: true,
          nav: false,
          animateOut: 'fadeOutLeft',
          animateIn: 'fadeInRight',
          autoplay:true,
          onTranslated: animateSlide,
          onTranslate: removeAnimation
      });
  
      function removeAnimation() {
          var item = $(".owl-item .layer");
          item.removeClass(item.children().data('animate'));
      }
  
      function animateSlide() {
          var item = $(".owl-item.active .layer");
          item.addClass(item.children().data('animate'));
      }
  });
  </code></pre>
  
  <p>Now I have this issues,</p>
  
  <ol>
  <li><p>It shows content first and then animate, I mean contents don't come with animated, it comes first then animate.</p></li>
  <li><p>First slide 'layer' DIV content don't animate content in first view but good after come back from other slides..</p></li>
  <li><p>Last slide 'layer' DIV content animation works on first time view but next time don't work. What I can see is it add double animation or don't remove animation class after slide to another.</p></li>
  <li><p>Middle slides are working fine without any problem.</p></li>
  </ol>