I'm trying to animate H1 elements for many pages using AOS (animate on scroll). I have several pages that use the title so I'm selecting all the titles with jQuery. If I type in the attributes manually in each title it works, but not when adding them through jQuery. I have selected other elements with jQuery to animate them and they do work. The tile is at the very top of each page.Thanks!

 <link href="/[email protected]/dist/aos.css" rel="stylesheet">
 <script src="/[email protected]/dist/aos.js"></script>

 <h1 class="title"> </h1>

 $(document).ready(function () {
    $('.title').attr({
       "data-aos": "zoom-in",
       "data-aos-duration": "2000"
    });

    AOS.init();
 });

 //refresh animations
 $(window).on('load', function() {
    AOS.refresh();
 });

I'm trying to animate H1 elements for many pages using AOS (animate on scroll). I have several pages that use the title so I'm selecting all the titles with jQuery. If I type in the attributes manually in each title it works, but not when adding them through jQuery. I have selected other elements with jQuery to animate them and they do work. The tile is at the very top of each page.Thanks!

 <link href="https://unpkg./[email protected]/dist/aos.css" rel="stylesheet">
 <script src="https://unpkg./[email protected]/dist/aos.js"></script>

 <h1 class="title"> </h1>

 $(document).ready(function () {
    $('.title').attr({
       "data-aos": "zoom-in",
       "data-aos-duration": "2000"
    });

    AOS.init();
 });

 //refresh animations
 $(window).on('load', function() {
    AOS.refresh();
 });

• javascript
• jquery
• animation
• animate.css
• animate-on-scroll

• Try to move AOS.init(); to window on load. Also remove aos.refresh from window load. – u238 Commented May 14, 2019 at 20:37
• That did not fix it. – charlesFromSoCal Commented May 14, 2019 at 20:42

2 Answers 2

<link href="https://unpkg./[email protected]/dist/aos.css" rel="stylesheet">
<script src="https://unpkg./[email protected]/dist/aos.js"></script>

<h1 class="title"> </h1>

$(document).ready(function () {
    $('.title').attr({
        "data-aos": "zoom-in",
        "data-aos-duration": "2000"
    });
    setTimeout(() => {
        AOS.init();
    }, 120);
});

You should append this to the header:

<script type="text/javascript">jQuery(document).ready(function($){$(function() {      AOS.init(); });  });  </script>