Two scroll-orchestration tools. Locomotive Scroll combines smooth scrolling with declarative data-scroll parallax and in-view detection. ScrollMagic pioneered the "scenes-on-scroll" pattern for pinning and scrubbing.
The real Locomotive Scroll runs on the panel below. Each block carries data-scroll attributes — the emoji layers move at different data-scroll-speed values, creating depth as you scroll inside the box.
↑ scroll inside the box · layers shift at different speeds via Locomotive Scroll
const scroll = new LocomotiveScroll({ el: container, smooth: true }); <!-- markup --> <div data-scroll data-scroll-speed="4">🚂</div>
Locomotive also fires events when elements enter the viewport. Below, a real Locomotive instance toggles an is-inview state on cards as they scroll past — fading and lifting them in.
ScrollMagic is the older sibling of this family. It introduced the idea of a Scene with a trigger element, a duration, and a tween (often handed to GSAP) that's scrubbed as you scroll — plus pinning elements in place. Today most of that role has been absorbed by GSAP's own ScrollTrigger (see the GSAP page) and by Locomotive Scroll. The pattern below is what a ScrollMagic scene expresses:
const controller = new ScrollMagic.Controller(); new ScrollMagic.Scene({ triggerElement: "#hero", duration: 300 }) .setTween("#hero", { scale: 0.6, opacity: 0.4 }) // scrubbed .setPin("#hero") // pin in place .addTo(controller);
cdn.jsdelivr.net/npm/locomotive-scroll, scoped to inner data-scroll-container panels. ScrollMagic is presented as a code explainer (not run live) because its pinning model targets full-page scroll; its modern equivalent, GSAP ScrollTrigger, runs for real on the GSAP page. Page chrome is the shared CSS shell.