michalsnik/aos
Aos
AOS is a scroll-triggered animation library that controls the execution, timing, and mapping of CSS transitions based on element visibility and browser viewport intersections. It functions as a DOM element animation controller and a viewport intersection trigger to initiate visual transitions as elements enter the screen.
The library utilizes a custom CSS transition bridge to map scroll-based triggers to CSS class changes, enabling integration with external styling frameworks. It supports anchor-based animation triggers, allowing the visibility of one page element to act as the trigger point for an animation on a different target element.
The system manages viewport entrance effects through configurable offsets and timing, using intersection observers to detect when content enters the visible area. It includes utilities for refreshing element position caches to maintain trigger accuracy during window resizing or document structure changes.
Features
- Scroll Animations - Triggers visual transitions and effects based on element visibility within the viewport as a user scrolls.
- Anchor-Based Animation Triggers - Allows the visibility of one page element to act as the trigger point for an animation on a different target element.
- Scroll-Triggered Animations - Triggers visual transitions for page elements as they enter the viewport using configurable offsets and timing.
- DOM Animation Controllers - Manages the timing, offsets, and execution of visual transitions on specific HTML elements.
- State Class Mapping - Toggles specific CSS classes on elements to trigger pre-defined style transitions when scroll thresholds are met.
- Scroll-Triggered Class Mappings - Maps scroll-based triggers to CSS class changes to integrate with external styling frameworks.
- Visibility-Triggered Actions - Executes animations or JavaScript events based on the visibility of elements within the browser window.
- Viewport Visibility Observers - Adds animations to page elements the moment they enter the visible screen area to improve user engagement.
- Configuration Attributes - Reads HTML data attributes at runtime to determine animation duration, easing, and delay settings.
- Intersection Observer Implementations - Uses the IntersectionObserver API to detect element visibility within the viewport to initiate CSS transitions.
- Custom Animation Effects - Applies specific styling transitions and media queries to create bespoke visual effects for selected elements.
- Scroll-Position Event Triggers - Links specific scroll positions or anchor elements to custom CSS classes to trigger complex visual sequences.
- Animation Trigger Recalculations - Updates internal element position caches when the browser window size changes to ensure triggers remain accurate.
- Viewport-Relative Trigger Calculators - Determines exact trigger points for animations by adding pixel offsets to the natural viewport entry.
- Position Refresh Triggers - Recalculates animation trigger points automatically or manually whenever the window resizes or document structure changes.
- Scroll-Based Animations - Library for animating elements on scroll.
