# mattdelacdev/wow

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/mattdelacdev-wow).**

9,904 stars · 3,983 forks · JavaScript

## Links

- GitHub: https://github.com/mattdelacdev/WOW
- Homepage: https://www.delac.io/WOW/
- awesome-repositories: https://awesome-repositories.com/repository/mattdelacdev-wow.md

## Description

WOW is a JavaScript library and animation engine designed to trigger CSS animations when elements enter the browser viewport during page scrolling. It serves as a tool for orchestrating visual transitions based on the user's scroll position and element visibility.

The library functions as a dynamic content animation tool, capable of detecting and animating new elements added to the page after the initial load. This allows visual effects to be applied to dynamically injected content without requiring a page refresh.

The system utilizes the Intersection Observer API to detect viewport entry and employs CSS class injection to activate animations. Configuration is handled through custom data attributes on HTML elements, and a Mutation Observer is used to monitor the document object model for new content.

## Tags

### User Interface & Experience

- [Scroll Animations](https://awesome-repositories.com/f/user-interface-experience/scroll-animations.md) — Triggers CSS animations specifically when elements become visible in the viewport during scrolling. ([source](https://github.com/mattdelacdev/wow#readme))
- [CSS Animation Utilities](https://awesome-repositories.com/f/user-interface-experience/animation-libraries/css-animation-utilities.md) — Orchestrates the execution of CSS animations based on element visibility and scroll position.
- [Viewport Visibility Observers](https://awesome-repositories.com/f/user-interface-experience/viewport-visibility-observers.md) — Uses native observers to detect when elements enter the viewport to trigger visual transitions.
- [Dynamic Content Transitions](https://awesome-repositories.com/f/user-interface-experience/animated-content-disclosure/dynamic-content-transitions.md) — Ensures consistent user experience by animating new page elements added after the initial load. ([source](https://github.com/mattdelacdev/wow#readme))
- [Dynamic Element Animation](https://awesome-repositories.com/f/user-interface-experience/component-utilities/animation-engines/dynamic-animation-controllers/dynamic-element-animation.md) — Applies animation effects to elements added to the page after initial load without requiring a refresh.
- [Dynamic Content Animation Tools](https://awesome-repositories.com/f/user-interface-experience/dynamic-content-animation-tools.md) — Detects and animates new DOM elements added to a page after the initial load.

### Graphics & Multimedia

- [Lifecycle Transition Classes](https://awesome-repositories.com/f/graphics-multimedia/media-production-suites/animation-tools/ui-motion-frameworks/css-animation-classes/lifecycle-transition-classes.md) — Activates predefined animations by injecting specific CSS classes when elements enter their visibility lifecycle.

### Web Development

- [DOM Mutation Observation](https://awesome-repositories.com/f/web-development/dom-mutation-observation.md) — Monitors the DOM for structural changes to automatically apply animation triggers to dynamically added content.