ScrollMagic
A small JavaScript library that reports where an element sits during scrolling and fires events as it changes.
- Stars
- 15k
- Forks
- 2.1k
- Licence
- MIT
- Language
- TypeScript
- Last update
- 6 days ago
- Type
- Library
What it is
ScrollMagic tells you where an element is relative to the viewport as the user scrolls, and fires events such as enter, leave, and progress when that changes. It wraps the browser's IntersectionObserver and ResizeObserver APIs and handles some edge cases for you. It does not animate anything by itself; you decide what to do with the scroll data, such as toggling classes or driving animations.
- Toggle a CSS class when an element enters or leaves the viewport
- Track scroll progress through a section and update a progress bar
- Drive scroll-linked video or parallax by mapping progress from 0 to 1
- Lazy load content when an element becomes visible
Great for
- Web developers adding scroll-triggered effects such as class toggles or lazy loading
- Developers who want scroll-position data without adopting a full animation toolkit
- Projects that need cross-browser scroll tracking with a small footprint
- Teams using React, Vue, or plain JavaScript, since the README says it is framework agnostic
Not ideal for
- People who want a ready-made animation solution: the README itself points to GSAP ScrollTrigger, Motion, or anime.js for that
- Users who only need simple CSS scroll effects, since native scroll-driven animations may cover those without a library (the README notes limited browser support)
- Non-programmers, because it is used through JavaScript code
How to get it
- 1
Install with a package manager
You'll need: Node.js (version not stated in README)
Install ScrollMagic (next tag)
npm install scrollmagic@next - 2
Run it
- Install the package with npm install scrollmagic@next
- Import ScrollMagic in your JavaScript file
- Create an instance with new ScrollMagic({ element: '#my-element' })
- Attach listeners such as .on('enter', ...) and .on('progress', ...)
- 3
Get the most out of it
- Use contain mode (no element set) for progress bars, parallax, and scroll-linked video
- Use intersect mode (element set) for enter/leave animations, lazy loading, and visibility tracking
- Set containerStart and containerEnd explicitly to create custom tracking zones
- Use .modify() or setters to change options after creation
- Pass a function to inset options for dynamic computation based on size
Downloads
Strengths
- Zero dependencies and a small bundle, according to the README badges
- Works with any scroll container, including window or a custom element, and supports horizontal and vertical scrolling
- MIT licensed and free to use
Trade-offs
- Provides data and events only; you must write the animation or behavior yourself
- The README describes this as version 3 with a v2 legacy branch, and the install command uses the next tag, so the API may still be settling
- Native scroll-driven animations are not yet supported in all browsers, which the README acknowledges for the alternative path
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| ScrollMagic (this) | 15k | Library | intermediate | 6 days ago | Web developers adding scroll-triggered effects such as class toggles or lazy loading |
| motion | 34.8k | Library | intermediate | 4 days ago | React developers who want to animate components with a simple API |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.