Having trouble adding aos.js using classes

问题

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 e.g.

$('.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

来源：https://stackoverflow.com/questions/58885987/having-trouble-adding-aos-js-using-classes