Stay safe at home - 40% OFF on all plans using promo code at signup: STAYATHOME

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

Go to Next Chapter