Animate On Scroll (AOS)
This module integrates the Animate On Scroll library, allowing elements on your website to animate as you scroll down the page. It also supports re-animating elements when scrolling back up.
The original Drupal implementation of the Animate On Scroll (AOS) library, that allows you to animate elements as you scroll down and up. If you scroll back to top, elements will animate to it's previous state and are ready to animate again if you scroll down. This module provides integration with AOS library.
Requirements
Animate On Scroll Library. (Check demo at: http://michalsnik.github.io/aos/).
- Click here to download the AOS library (v2).
- Copy aos library in your libraries directory, so aos.js will be located in libraries at /aos/dist/aos.js .
Installation
- Copy the 'aos' module into your Drupal modules directory and enable it.
- As this module provides the integration of AOS library, to get the animations on page simply add `data-aos` attribute to element, like
<div data-aos="<em>animation_name</em>"></div>in your html.
e.g.<div data-aos="fade-zoom-in" data-aos-offset="200" data-aos-easing="ease-in-sine" data-aos-duration="600"></div>
You can check all available animations & easing options at https://github.com/michalsnik/aos
Roadmap
- Expose configurations for AOS global options.
- Expose configuration to disable AOS library on admin pages.
The curiosity of module duplication
Sadly after the first Drupal implementation provided here by @priyankanarsule originally in 2018, over the years more and more mostly similar modules popped up with no reason. I sadly can not help users to clarify this confusion and minor differences (if any) because it was out of our scope to understand these decisions and we have no time to go through all of them to make distinctions between them. We are sorry that we weren't able to convince contributors and maintainers to merge forces.