AOS and a jQuery Event – Multimusen.dk

In this tutorial you will learn to use jQuery with AOS. It is asumed that jQuery is available. If not please add the jQuery CDN either to your WordPress in general (see this tutorial), or add the CDN code to your page. In this case I’ve loaded jQuery already.

First add the AOS CDN:

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

Now add an image, and add an HTML anchor to the image (id) in the block settings:

Click the IMAGE above, and see AOS in action.

After the image, towards the bottom of your page/post add the AOS CDN JavaScript.

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
  AOS.init();
</script>

Now add jQuery for a click event on the image:

<script>
$(document).ready(function(){

$('#imgMagus').click(function(){

   $('#imgMagus')
    .attr('data-aos', 'fade-up')
    .attr('data-aos-anchor-placement','center-bottom');

})

});
</script>

The jQuery code is straight foreward. The selector selects the #imgMagus id. Then a few attributes are defined by .attr() by key value pairs. According to the documentation, the data-aos is the actual effect. Anchor-placement will define how the movement will be.