Adding animations with the AOS library
As you may already know, the LiveCanvas plugin adds no CSS or JS to your site, no external libraries to your site – no additional weight – nada.
Unless you specifically ask for it, of course.
In the settings panel (wp-admin / LiveCanvas / LiveCanvas) there is an “Optional extras” section where you can choose to add a couple of selected, well integrated add-ons which can come in handy.
The first checkbox will load the Animate On Scroll library.
This means one extra JS (19k) and one extra CSS file (29k) is added to your site’s pages – not too much – and enables you to do some nice animations, which you can assign to your page’s elements via LiveCanvas editor interface – and perfect by code.
Inside the LiveCanvas editor, upon opening the “Edit Properties” panel, you will find the animation properties above the HTML properties.
Those SELECTs will just tweak the HTML code and implement most parameters of the AOS library.
Code-wise, Aos is pretty straighforward. Here is a sample from their documentation, if you care for it:
Set animation using
And adjust behaviour by using
<div data-aos="fade-up" data-aos-offset="200" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out" data-aos-mirror="true" data-aos-once="false" data-aos-anchor-placement="top-center" > </div>