title: How to add animations to slick sync slider
body: <p>I am using slick slider which has a functionality similar to <a href="https://codepen.io/paulfleury/pen/pvvzGx" rel="nofollow noreferrer">this</a> [Slick sync slider]. I am unable to add any animations to it. I want the image to appear from the left and text to appear from the right like <a href="https://codepen.io/ettrics/pen/WvoRQo" rel="nofollow noreferrer">this-second slide</a>.</p>
  
  <p>I tried adding animate.css and using data-animated="fadeInLeft", but that is loading all the slides at the same time and above all, it is not serving the purpose. </p>
  
  <p>Is there an option where i can add animation using JS or CSS?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.slider-quote-block').slick({ 
       slidesToShow: 1,
       slidesToScroll: 1,
       arrows: false,
       fade: true,
       asNavFor: '.slider-image-block' 
   });
   $('.slider-image-block').slick({
       slidesToShow: 1,
       slidesToScroll: 1,
       asNavFor: '.slider-quote-block',
       dots: false
      });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.testimonial {
   img {
    position:relative;
   }
   figcaption {
    position: absolute;
    bottom: 35px;
    left:0px;
    z-index: 1;
    h5 {
     color: white;
     font-size: 16px;
     padding: 0px 38px;
     position: relative;
     display: inline-block;
     font-size: 22px;
     font-family: $font-stack;
     &amp;:last-child {
      font-size: 22px;
      font-family: $font-arial;
      padding-left:15px;
      &amp;:before {
       content: "";
       position: absolute;
       background-color: $cabaret;
             top: -5px;
          left: -13px;
          height: 35px;
          width: 3px;
      }
     }
    }
   }
  }
  .slider-image-block, .slider-quote-block {
   width:50%;
   float:left;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" rel="stylesheet"/&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;section class="testimonial clearfix"&gt;
        &lt;!--image--&gt;
        &lt;div class="slider-image-block"&gt;
          &lt;div class="image-overlay"&gt;
            &lt;img src="images/testimonial1.png" alt="slider-image 1"&gt;
            &lt;figcaption&gt;&lt;h5&gt;name&lt;/h5&gt;&lt;h5&gt;designation&lt;/h5&gt;&lt;/figcaption&gt;
          &lt;/div&gt;
          &lt;div class="image-overlay"&gt;
            &lt;img src="images/testimonial1.png" alt="slider-image 2"&gt;
            &lt;figcaption&gt;&lt;h5&gt;name&lt;/h5&gt;&lt;h5&gt;designation&lt;/h5&gt;&lt;/figcaption&gt;
          &lt;/div&gt;
          &lt;div class="image-overlay"&gt;
            &lt;img src="images/testimonial1.png" alt="slider-image 3"&gt;
             &lt;figcaption&gt;&lt;h5&gt;name&lt;/h5&gt;&lt;h5&gt;designation&lt;/h5&gt;&lt;/figcaption&gt;
          &lt;/div&gt;
          &lt;div class="image-overlay"&gt;
            &lt;img src="images/testimonial1.png" alt="slider-image 4"&gt;
             &lt;figcaption&gt;&lt;h5&gt;name&lt;/h5&gt;&lt;h5&gt;designation&lt;/h5&gt;&lt;/figcaption&gt;
          &lt;/div&gt;
          &lt;div class="image-overlay"&gt;
            &lt;img src="images/testimonial1.png" alt="slider-image 5"&gt;
            &lt;figcaption&gt;&lt;h5&gt;name&lt;/h5&gt;&lt;h5&gt;designation&lt;/h5&gt;&lt;/figcaption&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;!--quote--&gt;
        &lt;div class="slider-quote-block"&gt;
          &lt;div class="blockquote"&gt;
            &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et&lt;/p&gt; 
          &lt;/div&gt;
          &lt;div class="blockquote"&gt;
            &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et&lt;/p&gt; 
          &lt;/div&gt;
          &lt;div class="blockquote"&gt;
            &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et&lt;/p&gt; 
          &lt;/div&gt;
          &lt;div class="blockquote"&gt;
            &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et&lt;/p&gt; 
          &lt;/div&gt;
          &lt;div class="blockquote"&gt;
            &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et&lt;/p&gt; 
          &lt;/div&gt;
        &lt;/div&gt;     
      &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>