Magento Stack Exchange is a question and answer site for users of the Magento e-Commerce platform. It only takes a minute to sign up.
Sign up to join this community
I have tried to add on scroll animation in my Magento 2 cms page. I used AOS Jquery for that.
I have added the js and CSS file and initialize AOS through cms page but It will shows
Uncaught TypeError: AOS.init is not a function
Does anyone have an idea how to use AOS in Magento2?
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/*
Just create requirejs-config.js file inside your theme template,
app/code/Vendor/Module/view/frontend/requirejs-config.js
code for js file,
var config = {
paths: {
'mgsaos': "js/aos.min"
},
shim: {
'aos': {
deps: ['jquery']
}
}
};
Now you can use inside your template like this,
<script>
require([ 'jquery', 'mgsaos' ], function ($,AOS) {
AOS.init({
duration: 1200,
});
});
</script>
Now
Remove var folder from root
Remove pub/static folder contents.
Run deploy command,
php bin/magento setup:static-content:deploy
As per Vishwas answer, you can do just a little modification in requirejs-config.js file
var config = {
'map': {
'*': {
'mgsaos': 'Vendor_Module/js/aos'
}
}
}
Then in .phtml you can call or use it like this:
require(['jquery', 'mgsaos'], function($,mgsaos,AOS){
$(document).ready(function(){
AOS.init({
duration: 1200
});
});
});
You can use this aos.js copy it and save it in your custom module web/js folder.
UPDATE: ANOTHER way is to use external AOS js by including it the default.xml
Create default.xml file inside app/code/Vendor/Module/view/frontend/layout/default.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js" src_type="url" />
</head>
</page>
Then you can easily use it in your phtml like this:
<script>
AOS.init({
easing: 'ease-out-back',
duration: 1200
});
</script>
