locomotive-scroll

The locomotive-scroll skill is a comprehensive guide to implementing smooth scrolling, parallax effects, and scroll-driven animations with the Locomotive Scroll JavaScript library. It solves the problem of building immersive, Apple-style scroll experiences — hardware-accelerated smooth scroll, element-level parallax, viewport detection, sticky elements, and horizontal scrolling — with correct markup and configuration rather than trial and error.

The skill explains the required HTML structure (data-scroll-container, data-scroll-section, and per-element data-scroll attributes), initialization options (smooth, lerp, multiplier, class, repeat, offset), and a full table of data attributes for parallax speed and direction, sticky positioning, trigger offsets, repeat detection, call events, and element IDs. It documents common patterns including basic smooth scrolling, multi-layer parallax, sticky elements, scroll-call callbacks, per-element progress tracking (0 to 1), and programmatic scrollTo with offset, duration, and callback. It ships a Vite starter template (index.html, main.js, style.css, package.json) and Python helper scripts for config generation and integration, plus API and GSAP-integration references. Importantly, it flags accessibility and performance trade-offs — scroll-hijacking impact, prefers-reduced-motion detection, mobile touch differences, and disabling smooth scroll on low-end devices — and covers cleanup (destroy) and resize handling (update).

It targets front-end and creative web developers building landing pages, storytelling sites, and long-form content that need depth and motion. Typical uses include adding smooth scroll, layering parallax, pinning sticky elements, triggering animations on viewport entry, and integrating with GSAP ScrollTrigger. All code is standard client-side front-end; the docs reference the public jsDelivr CDN for the library.