6

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?

|improve this question
  • did u got any solution – user1799722 Apr 17 at 18:50
0

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
|improve this answer
0

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>
|improve this answer
  • already used this : bit.ly/2Dlqreb – user1799722 Apr 19 at 7:03
  • I see, you can try the update in my answer – fmsthird Apr 19 at 7:18
  • still it shows issue – user1799722 Apr 19 at 7:52
  • @user1799722 make sure to run upgrade then redeploy static content – fmsthird Apr 19 at 8:35
  • yes it did same can u check link – user1799722 Apr 22 at 14:27
0

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

enter image description here

|improve this answer
  • hi can u check what i am missing i did like same still not working : bit.ly/2Dlqreb – user1799722 Apr 22 at 14:23
  • Hi, AOS is working in your web site but it is not working properly for all divs, maybe due to CSS (or some other JS files). I copy paste your page content in my local and run save init script for AOS and it working fine [please check the screencast ufile.io/115fr98s ]. So you may check your CSS for further debugging. Thank you – Pritam Info 24 Apr 23 at 8:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.