How to make AOS not working with Slick slider?

Question

I am using AOS to show html elements on scroll. It works well alone, but when I use it on the pages that contains Slick slider, the elements on which is AOS applied are not showing. Elements are hidden and if there is a lot scroll, it looks like the browser gives wrong information to AOS about current scrolling position and some elements are shown latter.

There is no specific code that makes this problems, any usage of slick on the same page with AOS makes AOS not working.

Did anyone solved this problem, I saw some pending questions on other websites and didn't find any solution?

Answer 1

I finally found solution for this problem. I managed to make animation work on first slide, but it didn't work on other slides, so I used slick events beforeChange and afterChange. In the first I removed, and in second I added the "aos-animate" class. I tried with AOS.refresh() and AOS.refreshHard() but it didn't help

This is my solution

$('#homeslider')
        .on('beforeChange', function() {
            $('.slider_title').removeClass("aos-animate");
            $('.slider_subtitle').removeClass("aos-animate");
            $('.small_cta').removeClass("aos-animate");
            $('.big_cta').removeClass("aos-animate");
            // AOS.refreshHard(); this didn't work
        })
        .on('afterChange', function(event, slick, currentSlide) {
            $('.slider_title').addClass("aos-animate");
            $('.slider_subtitle').addClass("aos-animate");
            $('.small_cta').addClass("aos-animate");
            $('.big_cta').addClass("aos-animate");
            // AOS.refreshHard(); this didn't work
        });

These classes are a part of each slide and each of them has class like this

<div class="slider_title" data-aos="zoom-in" data-aos-delay="300"></div>

And one more thing, I added AOS.init(); after slick initialization

Answer 2

You have to initiate Aos after the slider is initiate. I think you have to take in account all the previous sliders.

    // On init event
$('#productsCarousel').on('init', function(event, slick){
  console.log('#productsCarousel init');

        AOS.init({
            easing: 'ease-out-back',
            duration: 1000
        });
});

$('#productsCarousel').slick({
  centerMode: true,
  centerPadding: '8%',
  prevArrow: '<span class="slick-prev slick-btn"><span class="p-3"><span class="icon-prev"></span></span></span>',
  nextArrow: '<span class="slick-next slick-btn"><span class="p-3"><span class="icon-next"></span></span></span>',
  slidesToShow: 4,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 3
      }
    },
    {
      breakpoint: 480,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 1
      }
    }
  ]
});

Answer 3

jQuery(document).ready(function(){
<br>//content<br>
AOS.refresh();
<br>});

Put AOS.refresh() to bottom of function load. Element will be show back.

Answer 4

In my case, I put AOS refresh after slick initializations

$(window).on('load', function() {

    AOS.init({
        duration: 600,
        once: true
    });

    $('.section-product-container').slick({
        dots: true,
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3,
    });

    $('.slide-container').slick({
        dots: true,
        infinite: true,
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: true,
        speed: 300,
        autoplay: true,
        fade: true,
        cssEase: 'linear',
        customPaging : function(slider, i) {
            var number = (i+1);
            if ((i+1) < 10)
                number = '0'+(i+1);
            return '<a>'+ number +'</a>';
        }
    });

    $('.section-customer-container').slick({
        dots: true,
        infinite: true,
        slidesToShow: 5,
        slidesToScroll: 5,
        customPaging : function(slider, i) {
            if ((i+1) < 10)
                return '<a>0'+(i+1)+'</a>';
            return '<a>'+ i +'</a>';
        }
    });

    AOS.refresh();
});

Answer 5

$(document).ready(function () {

        $('#hero-slider').on('init', function (e, slick) {

            var$firstAnimatingElements = $('div.hero-slide:first-child').find('[data-animation]');

            doAnimations($firstAnimatingElements);

        });

        $('#hero-slider').on('beforeChange', function (e, slick, currentSlide, nextSlide) {

            var$animatingElements = $('div.hero-slide[data-slick-index="' + nextSlide + '"]').find('[data-animation]');

            doAnimations($animatingElements);

        });

        $('#hero-slider').slick({

            // autoplay: true,

            // autoplaySpeed: 10000,

            dots: true,

            fade: true

        });

        functiondoAnimations(elements) {

            varanimationEndEvents = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';

            elements.each(function () {

                var$this = $(this);

                var$animationDelay = $this.data('delay');

                var$animationType = 'animated ' + $this.data('animation');

                $this.css({

                    'animation-delay': $animationDelay,

                    '-webkit-animation-delay': $animationDelay

                });

                $this.addClass($animationType).one(animationEndEvents, function () {

                    $this.removeClass($animationType);
                });
            });
        }
    });