ScrollMagic
noun · scroll interaction library · element 32 of 117
A JavaScript library for scroll interactions: pin elements, toggle classes and play animations as the visitor scrolls.
- Projects
- 2
- Earliest project
- 2022
- Family
- Motion and data
What is ScrollMagic?
ScrollMagic lets a page react to scrolling. A scene starts and ends at chosen scroll positions, and in between it can pin an element in place, toggle classes or drive an animation, often a GSAP tween, in step with the scroll.
It was the standard for scroll-driven storytelling before GSAP's own ScrollTrigger arrived, and plenty of production sites still run on it.
How I use ScrollMagic
At Mentor Harbor Yachting Club the harbour banner is a ScrollMagic scene: the photograph pins for three screens while two scroll-linked tweens move the headings, and on phones the pin switches off so the page simply scrolls.
On the same site it adds a reveal to every content block, chosen from the block's layout, so a block an editor adds later picks up the motion too. I first shipped it at The British Club, alongside GSAP.
- Jonas Club Software2 projectsJonas Club Software · 2022 to 2024
