0
Welcome Guest! Login
0 items Join Now

Phoenix: Animation on Scroll

Your Guide to Using Animation on Scroll


AOS Atom

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.

AOS Attributes

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 Theme</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:

Predefined Options

Here is a list of predefined options for animations:

Fade animations:

  • fade
  • fade-up
  • fade-down
  • fade-left
  • fade-right
  • fade-up-right
  • fade-up-left
  • fade-down-right
  • fade-down-left

Flip animations:

  • flip-up
  • flip-down
  • flip-left
  • flip-right

Slide animations:

  • slide-up
  • slide-down
  • slide-left
  • slide-right

Zoom animations:

  • zoom-in
  • zoom-in-up
  • zoom-in-down
  • zoom-in-left
  • zoom-in-right
  • zoom-out
  • zoom-out-up
  • zoom-out-down
  • zoom-out-left
  • zoom-out-right

Found errors? Think you can improve this documentation? Please edit this page. You can also view the history of this page.