I use the AOS CSS library for scroll animation, but now it works immediately when the page loads. How to fix it?
jQuery(document).ready(function ($) {
//AOS CSS
AOS.init({});
})
<div class="counter-section--content">
<?php if (!empty($counter_item)):
$delay = 200;
foreach ($counter_item as $item):
$counter_item_color = $item['counter_item_color'];
$counter_item_icon = $item['counter_item_icon'];
$counter_item_number = $item['counter_item_number'];
$counter_item_text = $item['counter_item_text'];
?>
<div class="counter-section--content-item" data-aos="flip-left" data-aos-delay="<?= $delay; ?>" data-aos-duration="1500">
<div class="content-item--icon" style="background-color: <?= $counter_item_color; ?>;">
<img src="<?= $counter_item_icon['url']; ?>" alt="<?= $counter_item_icon['alt']; ?>">
</div>
<div class="content-item--text">
<div class="content-item--text-counter">
<span class="counter" data-count="<?= $counter_item_number; ?>">0</span>
<span class="plus">+</span>
</div>
<p><?= $counter_item_text; ?></p>
</div>
</div>
<?php
$delay += 100;
endforeach;
endif; ?>
</div>in the example, the second section of the site is provided, but its animation runs immediately when the page loads and not when you scroll to it