I have multiple HTML elements over multiple rows that I want to animate as 'zoom in' in a sequence.

When the user scrolls down, I want to animate the first item when it arrives in the viewport, and am currently using aos with the following:

<div class="col-lg-4 col-md-6 mb--30" data-aos="zoom-in" data-aos-duration="400" data-aos-once="true"
              data-aos-delay="50">

I then want to trigger the zoom in animation for the other 7 elements with a delay of 100 for each one, but I do not want this linked to the scroll. I want them all to trigger after the first item has been scrolled to, including the ones out of viewport at the time.

Is this possible with aos?

I have multiple HTML elements over multiple rows that I want to animate as 'zoom in' in a sequence.

When the user scrolls down, I want to animate the first item when it arrives in the viewport, and am currently using aos with the following:

<div class="col-lg-4 col-md-6 mb--30" data-aos="zoom-in" data-aos-duration="400" data-aos-once="true"
              data-aos-delay="50">

I then want to trigger the zoom in animation for the other 7 elements with a delay of 100 for each one, but I do not want this linked to the scroll. I want them all to trigger after the first item has been scrolled to, including the ones out of viewport at the time.

Is this possible with aos?

• javascript
• html
• css

1 Answer 1

You need to set the anchor property.

This will then use the anchor to trigger the animations

For example:

<div id="parent">

    <div data-aos="fade-in" data-aos-anchor="#parent"></div>

</div>