AOS not working on the same page with flickity

[karimramadan]

While using flickity on the same page with AOS. AOS only work for the first two or three animations then stop working.

[anonimnos]

@karimramadan I was having the same problem. You can fix this with only some js. For example, you can check then you reach div there AOS stop working and refresh AOS

$.fn.isInViewport = function() {
    var elementTop = $(this).offset().top;
    var elementBottom = elementTop + $(this).outerHeight();

    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    return elementBottom > viewportTop && elementTop < viewportBottom;
};

$(window).on('resize scroll', function() {
    if ($('.location').isInViewport()) {
        AOS.refresh();
    }
});

[james-morton-45]

For the benefit of others, the fix I use is quite simple - just bind an event listener to "ready.flickity" before initialising flickity (see https://flickity.metafizzy.co/events.html#ready) and use that to trigger the AOS refresh() method. AOS animations now load fine for me on pages with Flickity sliders.

AOS.init();

$('#banner').on( 'ready.flickity', function() {
  AOS.refresh();
}); 

var $banner = $('#banner').flickity();