title: Adding animations to text on slick.js slider
body: <p>I'm a attempting to add animations(utilizing animate.css) to some text on a slick.js slider. The animations work but not without first showing up and then performing animation. Here is the site I'm working on: <a href="http://dentiq.godigitaldev.com/" rel="nofollow">http://dentiq.godigitaldev.com/</a></p>
  
  <p>Here is my slick.js code:</p>
  
  <pre><code>$(document).ready(function(){
          $('.featured-wrap').slick({
              infinite: true,
              speed: 400,
              autoplaySpeed: 6000,
              autoplay: true,
              fade: true,
              slide: 'div',
              cssEase: 'linear',
              dots: true,
              arrows: true,
              pauseOnHover: false,
              adaptiveHeight: true,
              onBeforeChange: function() {
                  $('.slick-active &gt; .display').addClass('animated fadeInDown');
                  $('.slick-active &gt; .display').addClass('hidden');
              },
              onAfterChange: function() {
                  $('.slick-active &gt; .display').removeClass('hidden');
                  $('.slick-active &gt; .display').addClass('animated fadeInDown');
              }
          });
  </code></pre>
  
  <p>The .hidden class is simply: .hidden {display:none;}</p>