michalsnik/aos

AOS, short for "Animate on Scroll," is a small JavaScript library for adding animations to elements on a web page as the visitor scrolls. The idea is simple: as you scroll down, elements fade in, slide up, flip, zoom, or otherwise animate into view; and if you scroll back to the top, they animate back to their previous state and are ready to play again the next time you scroll past them. The author describes the effect as similar to WOWJS, but built around a different idea: the animations are driven by CSS3 rather than by JavaScript moving things frame by frame. In practice, you install AOS through npm or bower, link its CSS file, include its JavaScript file, and then call AOS.init() once on your page. To animate any element you add a data-aos attribute to the HTML, for example data-aos="fade-up" or data-aos="flip-left", and that element will animate using the chosen built-in animation when it scrolls into view. Extra data attributes let you tune individual elements: data-aos-offset to trigger sooner or later, data-aos-duration for how long the animation lasts, data-aos-easing to change the timing curve, data-aos-delay to pause before starting, data-aos-anchor to tie the trigger point to a different element, data-aos-anchor-placement to control which part of the element must hit which part of the viewport, and data-aos-once to play only the first time. You can also pass an options object to AOS.init() to set defaults for the whole page, and a disable option lets you turn AOS off on mobile or under any custom condition. The library exposes init, refresh, and refreshHard methods, the last two used to recalculate positions when the page changes. It is built as a UMD module so it can be loaded as AMD, a global script, a Node module, or an ES6 import. You would use AOS when you want polished scroll animations on a landing page or marketing site without writing the animation logic yourself.