Aos: "Sequenced Animations" for the first items.

[JQOz]

Hi,

I try to make "Sequenced Animations".

The problem is: The first items are coming in the same time the others are waiting for the scrolling.

How ti fix this issue?
Thanks for any Helps

[JQOz]

I see that there is a demo for "asynchronously loading" but you made it it for non existing objects. It is really hoard to use it for wordpress posts. Could you plase modify it for the items which we can call with the classname.

    <script>
      AOS.init({
        easing: 'ease-in-out-sine'
      });

      setInterval(addItem, 300);

      var itemsCounter = 1;
      var container = document.getElementById('aos-demo');

      function addItem () {
        if (itemsCounter > 42) return;
        var item = document.createElement('div');
        item.classList.add('aos-item');
        item.setAttribute('data-aos', 'fade-up');
        item.innerHTML = '<div class="aos-item__inner"><h3>' + itemsCounter + '</h3></div>';
        container.appendChild(item);
        itemsCounter++;
      }
    </script>

[calebmichaelsanchez]

If I am understanding you correctly, it sounds like you just need to use the data-aos-delay attribute so you can make your items fade in sequentially.

Check here.

[btraut]

I'm pretty sure @AbrahamHalil was speaking of something different, something that I want as well:

When the user first arrives at my page, I want sequencing of the animations that are triggered on page load. For example, I want the main header to fade in, then the next section content. This can be accomplished with data-aos-delay as you suggested, but it doesn't address all scenarios. When the user's screen is small, he may not actually trigger the next section's animation on page load. Then, when he scrolls down, the animation triggers but only after an unwanted delay.

So, back to the request: Is there a way to sequence animations or use delay only on initial trigger?

[michalsnik]

Hey, unfortunately there is no sequence animations feature nor a built in way to set delay only on initial trigger.

I do however have an idea how you can accomplish what you need using data-aos-anchor feature.

Set data-aos-anchor="#parentElementMaybeBody" on each element that you want to animate in sequence. Then set proper delays and you're good to go. Anchor setting lets you animate current element when the anchor's position reaches animation trigger point (which in case of body is immediately). I hope this helps!

[ktoshkaVi]

If I understand the problem right..
You can manage when item will come via css (js , jquery):

<style>
       yourItem1[data-aos {
        transition-delay: 0.2s;
      }
       yourItem2[data-aos {
        transition-delay: 0.5s;
      }
</style>

[arthurdewolf]

I solved this as follows:

var delay = 0;
$('[data-aos]').each(function() {
   if ($(this).visible(true, true)) {
       delay = delay + 400;
       $(this).attr('data-aos-delay', delay);
   }
});

This loads on pageload before AOS is initialized. It goes through all elements with attribute data-aos and checks if it is visible within the viewport (using https://github.com/customd/jquery-visible). If it is then it updates data-aos-delay with an incremented value of 400ms.

[kapitannwel]

@arthurdewolf - thank you for helping me, but you do not need an extra plugin to check if the element is visible, just use this:
if($(this).is(":visible")){}
your code with a little tweak works perfectly, thank you again.

And of course, thank you for the AOS plugin!

[ghost]

@arthurdewolf - I love this code, but I have a weird issue. They load one, after another - but then 7/8 appears before 3,4,5 can appear and 6 appears...eventually!.

I've stripped it down and can't understand. I have the jQuery Visible script but still random order....