Your Guide to Using Animation on Scroll
Animation on Scroll (AOS) is a small JS library that allows you to animate elements on your page as you scroll.
To initialize the library, go to your Base Outline > Page Settings and drag the Animate on Scroll atom into the dock. You can then save the Page Settings.
By clicking on the atom, you will find the Global settings to be used for your AOS elements:
Option | Description |
---|---|
Duration | Values from 0 to 3000, with step 50ms. |
Once | Whether animation should happen only once - while scrolling down. |
Delay | Values from 0 to 3000, with step 50ms. |
Easing | Default easing for AOS animations. |
Offset | Offset (in px) from the original trigger point. |
Once the atom is in place, you can now use the data-aos attributes within any of your HTML tags as shown here:
<div data-aos="fade-up">Photo Centric Template</div>
You can also set each elements duration and delay as shown here:
<div data-aos="fade-up" data-aos-delay="500" data-aos-duration="500">Focus</div>
The animation attributes can also be used within a Section / Block via the Tag Attribute option:
Here is a list of predefined options for animations:
Fade animations:
Flip animations:
Slide animations:
Zoom animations: