Add AOS attributes by Javascript

I am trying to add the attributes to launch AOS animations via javascript, but it is not working correctly. Now, adding the attributes by js, when the animation is launched, instead of showing the element, it hides it. I think it may be because the element is rendered first, and js acts after adding the AOS attributes, so the animation does it in reverse for me. this is my code to add AOS attr:

var hero = document.getElementById('main-hero');
hero.setAttribute('data-aos', 'fade-up');

Is there any way to add AOS by js and have it work? add it on HTML is currently unvailable for accessibility.