Conflicting with AOS Animations

[Panoplos]

short description of the bug / issue, provide more detail below.

Slick is causing issues with AOS animations on scroll reveal. See https://github.com/michalsnik/aos/issues/309

====================================================================

[ https://credify.one ]

As in the other issue, you can see this is causing problems of no animation on desktop browser.

In the js/main.js, everything works fine when I comment out the Slick initialisation.

====================================================================

Steps to reproduce the problem

1. Initialise Slick on document ready.
2. Initialise AOS after or before (both do not work).
3. Scroll an AOS data-tagged element into view.

====================================================================

What is the expected behaviour?

Expect element to animate when scrolled into view.

====================================================================

What is observed behaviour?

Nothing animates.

====================================================================

More Details

• Doesn't seem to happen on mobile.
• jQuery 1.1.3 & Slick 1.8.1

[afalchi82]

Same with ScrollReveal (v.3/v.4 beta)

[ugljanin]

Did anyone solved the problem of AOS with Slick slider?

[PetrVasilev]

Same for me!

[saroj85]

Below is a link please Visit and solve your problem. https://techkro.in/slick-slider-with-animate-css/

[tomaszpoliszuk]

https://github.com/kenwheeler/slick/blob/master/CONTRIBUTING.markdown

Please provide isolated problem on (for example) jsfiddle (hint: not on your webpage where anything could interfere with slick code).

[magic-dream]

I also have the same error AOS with slick slide. please anyone can solve.

[tomaszpoliszuk]

I also have the same error AOS with slick slide. please anyone can solve.

https://github.com/kenwheeler/slick/blob/master/CONTRIBUTING.markdown

Please provide isolated problem on (for example) jsfiddle (hint: not on your webpage where anything could interfere with slick code).

[rtoenjes]

On https://github.com/michalsnik/aos/issues/155#issuecomment-514591450 I found this solution for me:

$(window).on('load', function () {
  AOS.refresh();
});
$(function () {
  AOS.init();
});

[hocomadvies]

Experienced the same behaviour and this made it work for me:

https://github.com/michalsnik/aos/issues/635

$(window).on("scroll", function () {
     AOS.init();
 });

[Coysh]

Experienced the same behaviour and this made it work for me:

michalsnik/aos#635

$(window).on("scroll", function () {
   AOS.init();
 });

I found this solution worked, but put heavy load on the browser. This solution seems to be working for me.

$('.carousel').on('init breakpoint', function(event, slick, direction){
    setTimeout(function() {
        AOS.refresh();
    }, 500);
});

The timeout is needed, even though it's messy. Could do with a bit of tweaking.