Having trouble adding aos.js using classes

Question

I have a Gutenberg website and I want to add animations that the use can control, I am using aos (animate on scroll) and I figured, if I create a class then loop over it and that adds the relevant data-aos values eg

$('.aos-fade-up').each(function(i) {
    $(this).attr('data-aos', 'fade-up');
});

It works as intended, adds the relevant attribute, and the content is hidden, but nothing happens on scroll.

What is the problem here? The attribute is on, it hides the content but nothing happens on scroll.

Pen here: https://codepen.io/StuartAttain/pen/MWWzVpe

Answer 1

You have to init after you do the replacements:

https://codepen.io/farinspace/pen/bGVppQb

or do a AOS.refreshHard(); afterwards:

https://codepen.io/farinspace/pen/ExVKKrw