1

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

Stuart
  • 45
  • 8

1 Answers1

0

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

farinspace
  • 8,422
  • 6
  • 33
  • 46