1

I want to add AOS animation to all elements that have a class of animate_right. I used this code and it adds all of the html (attributes and classes) to the tag only the animation does not work. Here is my code

  <script src="/js/aos.js"></script>
  <script>
    AOS.init({
      easing: 'ease-in-out-sine'
    });
    
    $(document).ready(function () {
    $(".animate_right").addClass("aos-item aos-init aos-animate");
    $('.animate_right').attr({
        "data-aos": "fade-right",
        "data-aos-once": "false",
        "data-aos-duration": "600"       
    });
</script>
PeggyMe
  • 33
  • 3

1 Answers1

1

You have to add the attributes before initializing the AOS. Like this:

<script>
    // first add attributes
    $('.animate_right').attr({
        "data-aos": "fade-right",
        "data-aos-once": "false",
        "data-aos-duration": "600"       
    });
    
    // now initialize AOS
    AOS.init();
  </script>
Shojib Khan
  • 36
  • 3
  • Thank you for your answer. I am finished with the project that I wanted to use this on. I have another one coming up that I will test this on. – PeggyMe Aug 26 '22 at 02:55