'Adding animations to text on slick.js slider

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: http://dentiq.godigitaldev.com/

Here is my slick.js 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 > .display').addClass('animated fadeInDown');
                $('.slick-active > .display').addClass('hidden');
            },
            onAfterChange: function() {
                $('.slick-active > .display').removeClass('hidden');
                $('.slick-active > .display').addClass('animated fadeInDown');
            }
        });

The .hidden class is simply: .hidden {display:none;}

jqueryanimationslideshowslick.js


Solution 1:[1]

Your text blocks are located inside the moving animated slider blocks. Try to move them into the outer container. In that case you can access them by class or by index.

For example:

$('.all-displays > .display').eq($('.slick-active').index()).addClass('animated fadeInDown');

Solution 2:[2]

text inside using sass ```

.header-slider-item-content {
    opacity: 0;
    transition: all 3s;
  }
.slick-active {
  .header-slider-item-content {
    opacity: 1;
    transition: all 3s;
  }
}
```

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 kreig
Solution 2 Rogerio Orioli

Related Questions