ScrollMagic is a lightweight JavaScript library for detecting scroll position and firing events based on element visibility in the viewport.
The library solves the problem of reliably tracking scroll interactions across browsers and devices. It wraps the IntersectionObserver and ResizeObserver APIs, handling performance pitfalls and edge cases that developers would otherwise need to manage manually. ScrollMagic provides precise scroll-position data and progress values as elements move through the viewport, firing events when visibility changes. It does not animate by itself; instead, it gives you the scroll data and events you need to drive your own animations or interactions through whatever means you choose.
ScrollMagic suits developers building scroll-driven user experiences who want a foundation layer without animation overhead. It works framework-agnostic with React, Vue, or vanilla JavaScript, supports both window and custom scroll containers, handles horizontal and vertical scrolling, and includes a plugin system for extensibility. The README explicitly names GSAP ScrollTrigger, Motion, and anime.js as alternatives for developers seeking ready-made scroll animation solutions, and mentions native CSS scroll-driven animations as a complementary approach for pure CSS use cases. Choose ScrollMagic if you need cross-browser event callbacks, progress tracking, and state management that native scroll-driven animations do not provide, or if you prefer to pair scroll detection with your own animation tool.
The project is written in TypeScript with native type support and is designed to be SSR-safe. It emphasizes a tiny footprint with zero dependencies, performance optimization through shared observers and batched rendering, and mobile compatibility. The codebase is open source and maintained as a modern rewrite distinct from the legacy v2 branch.
