How to use Animate On Scroll Library with Oxygen Builder

min read / WordPress / Share on: Twitter, LinkedIn, Facebook

Post summary: Animate on scroll library (AOS) is easy to use CSS driven on scroll animation library. Plugin logic is in .JS, animations in .CSS. You can read more about AOS on CSS tricks and of course on AOS on GitHub. UPDATE: I found this is already included in oxygen LOL :-D. You need to go to…

Animate on scroll library (AOS) is easy to use CSS driven on scroll animation library. Plugin logic is in .JS, animations in .CSS. You can read more about AOS on CSS tricks and of course on AOS on GitHub.

UPDATE: I found this is already included in oxygen LOL :-D. You need to go to the element settings > Advanced > Effects > Animate On scroll and you can style your class and then use it on other elements.

OLD TUTORIAL – NOT NEEDED, ALREADY INCLUDED IN OXYGEN

Currently it is stable in version 2 and version 3 is in beta testing. So I will go with stable version for now.

AOS Implementation steps:

1. Import CSS and JS files
2. Create configuration
3. Use the animation data attributes on elements

Import Animate On Scroll with Advanced scripts

Current AOS stable version CDN links:

Create configuration in code block/advanced scripts

You have 2 options how to add a configuration of AOS to your pages. You can add a code block to your Oxygen Template, or you can create config in advanced scripts and use the schortcode. I will go with shortcode.

Default configuration:

window.onload = function(){
AOS.init({
      offset: 200,
      duration: 800,
      easing: 'ease-in-quad',
      delay: 100,
});
}

You can customize the configuration by your according to your taste. You can find the options here: https://github.com/michalsnik/aos/tree/v2.

Shortcode in Advanced Scripts

Implementation with Code Block

Add AOS data attribute to element to apply the animation on scroll

1. Select the element in Oxygen
2. In element settings go to the Advanced > Attributes > Add attribute
3. Add attribute data-aos with value animation name

You can’t use a class to copy the attributes on other elements. It’s need to be done manually on every element you want to animate. On the other hand it may be helpful to not overanimate the page :).

Flip right animation example:

Animations:

There are serveral predefined animations you can use already:

• 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

You can find all options here: https://github.com/michalsnik/aos/tree/v2. Good luck!

0 comments