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/*
