How to add and use AOS (Animate On Scroll) to a X Theme website

EDIT: Since the time of writing this post animation capabilities have been re-added to the X / Pro theme so one no longer needs to use AOS as it can be natively achieved with this awesome theme 🙂

AOS is a really neat, light library by Michał Sajnóg that adds basic on-scroll animation effects to your front-end elements. There’s been a number of posts regarding scroll animations on the Themeco forum since they phased out the V2 column fade-in, and this is a really nice solution that allows you to add that finishing touch to your website design.

Step 1:

Install and activate the ‘Insert Headers and Footers’ plugin (free).

Insert Headers and Footers WordPress plugin.

Step 2:

Using that plugin, add this script to the in the Header section:

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/aos.css" />

Then add this to the Footer:

<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
  <script>
    AOS.init();
  </script>

Step 3:

Go to Theme Options > JS and add the following. Note that here is where you can change the animation behaviour default values.

AOS.init();

// You can also pass an optional settings object
// below listed default settings
AOS.init({
  // Global settings:
  disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
  startEvent: 'DOMContentLoaded', // name of the event dispatched on the document, that AOS should initialize on
  initClassName: 'aos-init', // class applied after initialization
  animatedClassName: 'aos-animate', // class applied on animation
  useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
  disableMutationObserver: false, // disables automatic mutations' detections (advanced)
  debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
  throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)
  

  // Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
  offset: 120, // offset (in px) from the original trigger point
  delay: 0, // values from 0 to 3000, with step 50ms
  duration: 1200, // values from 0 to 3000, with step 50ms
  easing: 'ease', // default easing for AOS animations
  once: false, // whether animation should happen only once - while scrolling down
  mirror: false, // whether elements should animate out while scrolling past them
  anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation

});

Step 4:

Now you’re ready to add animation effects to your elements! Open Cornerstone to edit your page and select the element you want to animate. In the Inspector, click Customize. Right at the bottom you’ll find a section called ‘Custom Attributes’. Click the ‘+’ to add a new attribute.

Step 5:

In the Name field, add data-aos. In the Value field, enter the type of animation you want to add, e.g. fade-up. Here’s a list of all the preset animations that come with the library.

Thereafter you can add further attributes to change the behaviour of the animation (that’s if you’re not happy with the defaults), namely: 

data-aos-offset
data-aos-delay
data-aos-duration
data-aos-easing
data-aos-mirror
data-aos-once
data-aos-anchor-placement
Adding custom attributes

Step 6: Save!

And that’s it 🙂 Full documentation on AOS can be found here.