All animations firing at once unless browser window is resized

[Krucial92]

Hello,

Thanks for the awesome plugin.

On page I am fading in 6 different images which are all using the same animation and settings. The problem is that all these animations are firing as soon as I have scrolled onto the first image. Only once the browser window is resized, the animations appear in order when they are coming onto the screen.

Any idea what the problem is?

<div data-aos="fade-in" id="<?php echo $id ?>" data-aos-delay="500">
    <?php echo do_shortcode( $content ); ?>
</div>

And initalizing in my JS file:

jQuery(document).ready(function ($) {
    "use strict";

    /**
     * Initialize AOS Animations
     */

    AOS.init({
        duration: 1200,
        easing: 'ease-in-out-sine'
    });

});

So just to confirm, that once the browser window is resized, all animations appear at the right times. But unless it is resized (on page load), they are all firing in one go once I scroll to the first image.

Any idea what the issue is? Thanks

[ranjithrathnaker]

Have the same problem.Any idea what the issue is?

[michalsnik]

Hey, if you're using jQuery you can refresh position of corresponding trigger points using:

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

It looks like your elements on document.ready have not set height yet - it might happen when you load images without setting height. In this case all elements start at the same point - and if the script sees them like this while performing calculations, they will eventually all animate after you reach their initial position. Refreshing their position on window.load should help you.

Hope this helps!

[Krucial92]

Cool, thanks Michael, will give this a shot.

[ranjithrathnaker]

Thanks Michael.Thanks for the solution it's perfect now.

[michalsnik]

Cool, I'm closing this issue for now. Provided solution should also work for you @Krucial92 :)