Your Guide to Using Animation on Scroll
Starting with Myriad 2.1.0, we have implemented the Animation on Scroll (AOS) library to allow animations to be used within the Myriad template.
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:
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: