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).
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
Step 6: Save!
And that’s it 🙂 Full documentation on AOS can be found here.