Aleš Sýkora wrote

How to use Animate On Scroll Library with Oxygen Builder

9. 8. 2021 in

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:

CSS

<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">

JS

<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>

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

AOS script as a shortcode in Advanced scripts

Implementation with Code Block

AOS script initialization in 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
AOS data attribute in Oxygen Builder

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!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

More from category
Aleš Sýkora wrote
Comments Shortcode for Content Templates
11. 11. 2019 in
Display comments section whetever you want.
Read More
Aleš Sýkora wrote
Child posts menu for custom post type parent item
1. 2. 2021 in
This code will help you display menu of childs on current post. For example: Product 1 = parent has those child pages: – Product usage– How to– Disclaimer– Calculator When you put this child items menu in your template, it will show all childs of product 1 on all child pages and also on product […]
Read More
Aleš Sýkora wrote
Show Oxygen Element by current language with WPML
26. 4. 2021 in ,
When you use WPML with Oxygen Builder and use 1 template for all languages, then you propably want to display/hide elements conditionally. And of course you can. Use the WPML’s filter wpml_current_language to get current language code. Then use the if function to return value you want. I am returning the language code and then […]
Read More
magnifiercross linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram