Adding animations with the AOS library

As you may already know, the LiveCanvas plugin adds no CSS or JS to your site at all, unless you specifically ask for it, of course.

In the settings panel (wp-admin / LiveCanvas / LiveCanvas) there is an “Add animations” option.

Enabling this option will add the Animate On Scroll library to your site.

This means one extra JS (19k)  and one extra CSS file (29k) is added  – enabling you to add 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 data-aos attribute:

  <div data-aos="fade-in"></div>

And adjust behaviour by using data-aos-* attributes:

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

See full list of all animations, easings and anchor placements