Animacje on-scroll dla elementów ładowanych AJAX-em

Problem

Gdy elementy są ładowane dynamicznie przez AJAX (np. przy użyciu "Load More"), biblioteka Lokomotywa Scroll nie wykrywa automatycznie klas animacji dla nowo dodanych elementów. Po resecie scrolla elementy otrzymują od razu stan inview, co powoduje, że animacje nie działają poprawnie.

Rozwiązanie

Aby animacje działały poprawnie na elementach ładowanych AJAX-em, należy użyć atrybutu data-scroll-class, który nadpisuje domyślną klasę animacji.

Przykład użycia

<div class="col-card__img anim-imgScale js-animation" 
     data-scroll 
     data-scroll-class="activate" 
     data-delay=".15" 
     data-animation="imgScale">
    <!-- Zawartość elementu -->
</div>

Wyjaśnienie atrybutów

• data-scroll - Włącza obsługę scrolla przez Lokomotywa Scroll
• data-scroll-class="activate" - Klasa, która zostanie dodana do elementu, gdy wejdzie w viewport (nadpisuje domyślną klasę)
• data-delay=".15" - Opóźnienie animacji w sekundach
• data-animation="imgScale" - Typ animacji do zastosowania