Magento – How to add on scroll animation in magento 2 using AOS (Animation On Scroll) Jquery

You may try this, It works for me.

step 1)

File: app/code/Vendor/Module/view/frontend/requirejs-config.js

var config = {

map: {
    '*': {
        'mgsaos' :  'Vendor_Module/js/aos'
    }
},
"shim": {
    "mgsaos": ['jquery'],
}
};

Step 2) JS and HTML code in your PHTML file.

<div data-aos="fade-up"
     data-aos-anchor-placement="center-center" class="aos-item" >
     <div class="aos-item__inner"><h3> AOS</h3></div>
</div>


<div data-aos="fade-up"
     data-aos-anchor-placement="center-center" class="aos-item" >
     <div class="aos-item__inner"><h3> Hello World</h3></div>
</div>





<script type="text/javascript">
requirejs( [ 'require', 'jquery',  'mgsaos' ],
function( require, $, AOS ) {
         AOS.init({
                  duration: 1200,
         });

});
</script>

Note : I did not use script type="text/x-magento-init" instead I use script type="text/javascript"* to Init AOS.

step 3) Run below commands to remove static files.

sudo rm -rf var/view_preprocessed/*
sudo rm -rf var/pub/static/*
sudo rm -rf var/cache/*
sudo rm -rf var/generated
sudo rm -rf var/composer_home
sudo rm -rf var/page_cache
sudo rm -rf var/view_preprocessed
sudo rm -rf pub/static/frontend/*