Animation trigger too early when using other script like "load more" cards

[Bammede]

This is:

• Bug

Specifications

• AOS version: newest
• OS: Windows
• Browser: Chrome

Expected Behavior

Animation should trigger

Actual Behavior

No animations

Steps to Reproduce the Problem

Portfolio section has cards with images and there is "load more" button to display more cards. Code below

    <script>
      const loadMore = document.getElementById('btn');
      const hid = [...document.querySelectorAll('.foto-container.hidden')];

      hid.splice(0, 9).forEach(
        elem => elem.classList.remove('hidden')
      );

      loadMore.addEventListener('click', function(e) {
        e.preventDefault();
        
        hid.splice(0, 6).forEach(
          elem => elem.classList.remove('hidden')
        )
        
        if (hid.length == 0) {
          loadMore.classList.add('hidden');
        }
      });
    </script>

Detailed Description

Animations above and below "load more" feature works well, but when I click "load more" button and more cards are displayed, then below animations on the page are triggered as well, so when I scroll the page to buttom then elements are after animations already. Animations shouldn't trigger when clicked "load more" feature.

Possible Solution

[markmorris]

Each time you add something to DOM, you need to use AOS.refresh();

We do something similar with Filtering hiding and showing new DOM Elements.