# terwanerik/scrolltrigger

**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/terwanerik-scrolltrigger).**

3,964 stars · 300 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/terwanerik/ScrollTrigger
- Homepage: https://terwanerik.github.io/ScrollTrigger/
- awesome-repositories: https://awesome-repositories.com/repository/terwanerik-scrolltrigger.md

## Topics

`animation` `css` `html-element` `javascript` `scrolltrigger` `trigger` `user-scrolls`

## Description

ScrollTrigger is a JavaScript library and DOM scroll event manager designed to execute callbacks and toggle CSS classes when elements enter or exit the browser viewport. It functions as a high-level interface for the Intersection Observer API and a system for initiating visual transitions and asynchronous tasks based on an element's position relative to the viewport.

The tool allows for the definition of precise trigger points using pixel or percentage offsets to control exactly when events fire. It manages scroll-driven visual animations and lazy loading implementations by tracking visibility thresholds.

The library provides capabilities for monitoring scroll activity, such as tracking when scrolling starts, stops, or changes direction. It further supports viewport event triggering to run custom functions or promises as elements cross specific coordinates.

## Tags

### User Interface & Experience

- [Scroll Animations](https://awesome-repositories.com/f/user-interface-experience/scroll-animations.md) — Provides a system to trigger visual transitions and asynchronous tasks based on element visibility within the viewport.
- [Viewport Intersection Callbacks](https://awesome-repositories.com/f/user-interface-experience/scroll-containers/custom-scroll-triggers/scroll-lifecycle-callbacks/viewport-intersection-callbacks.md) — Runs custom functions or promises when elements enter, leave, or remain visible within the browser viewport. ([source](https://cdn.jsdelivr.net/gh/terwanerik/scrolltrigger@master/README.md))
- [Scroll-Driven Animation Tools](https://awesome-repositories.com/f/user-interface-experience/scroll-driven-animation-tools.md) — Synchronizes visual transitions and CSS property changes with the user's scroll position and element visibility.
- [Scroll Event Controllers](https://awesome-repositories.com/f/user-interface-experience/scroll-interaction-handlers/scroll-event-controllers.md) — Provides logic to monitor scroll events and direction changes to control UI element states.
- [State-Based CSS Toggling](https://awesome-repositories.com/f/user-interface-experience/state-based-css-toggling.md) — Dynamically modifies CSS classes on elements to reflect their current visibility state during scrolling.
- [Scroll-Triggered Class Mappings](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/class-based-styling/css-class-based-styling/css-framework-mapping/scroll-triggered-class-mappings.md) — Maps viewport intersection events to specific CSS class changes to drive visual transitions. ([source](https://cdn.jsdelivr.net/gh/terwanerik/scrolltrigger@master/README.md))
- [Viewport Intersection Events](https://awesome-repositories.com/f/user-interface-experience/viewport-intersection-events.md) — Triggers custom JavaScript functions when elements enter or exit the viewport based on visibility thresholds.
- [Viewport Threshold Dispatchers](https://awesome-repositories.com/f/user-interface-experience/viewport-threshold-dispatchers.md) — Executes custom callbacks precisely when elements cross predefined pixel or percentage offsets within the viewable area.
- [Scroll Observers](https://awesome-repositories.com/f/user-interface-experience/scroll-interaction-handlers/scroll-state-controllers/scroll-observers.md) — Provides observers to track scroll start, stop, and direction changes for reactive UI logic. ([source](https://cdn.jsdelivr.net/gh/terwanerik/scrolltrigger@master/README.md))

### Web Development

- [Intersection Observer Wrappers](https://awesome-repositories.com/f/web-development/intersection-observer-wrappers.md) — Functions as a high-level wrapper for the Intersection Observer API to simplify element visibility detection.
- [Scroll Trigger Libraries](https://awesome-repositories.com/f/web-development/scroll-trigger-libraries.md) — Provides a complete JavaScript toolset for executing callbacks and toggling CSS classes during viewport intersection.
- [Lazy Loading Schedulers](https://awesome-repositories.com/f/web-development/lazy-loading-libraries/image-lazy-loading/lazy-loading-schedulers.md) — Supports lazy loading by scheduling asynchronous tasks when elements enter the viewport.

### Software Engineering & Architecture

- [Viewport Visibility Callbacks](https://awesome-repositories.com/f/software-engineering-architecture/event-driven-callbacks/spatial-trigger-callbacks/viewport-visibility-callbacks.md) — Executes custom functions when elements enter or leave the visible area to trigger tasks like lazy loading. ([source](https://terwanerik.github.io/ScrollTrigger/))
- [Viewport Relative Tracking](https://awesome-repositories.com/f/software-engineering-architecture/item-visibility-control/viewport-based-renderers/viewport-aware-position-calculators/viewport-relative-tracking.md) — Monitors the real-time position of DOM elements relative to the browser viewport to determine trigger points.
- [Scroll Behavior Observers](https://awesome-repositories.com/f/software-engineering-architecture/schema-based-state-validation/cross-state-validation/state-change-triggers/scroll-behavior-observers.md) — Tracks user scrolling behavior to trigger actions when scrolling starts, stops, or changes direction.

### System Administration & Monitoring

- [Scroll-Offset Thresholds](https://awesome-repositories.com/f/system-administration-monitoring/threshold-monitoring/scroll-offset-thresholds.md) — Manages precise trigger points using pixel or percentage offsets to control event firing.
- [Step Trigger Offsets](https://awesome-repositories.com/f/system-administration-monitoring/threshold-monitoring/scroll-offset-thresholds/step-trigger-offsets.md) — Allows defining exact trigger moments using pixel or percentage offsets based on element or viewport size. ([source](https://cdn.jsdelivr.net/gh/terwanerik/scrolltrigger@master/README.md))