locomotive-scroll

Implement smooth scrolling, parallax effects, and scroll-driven animations with Locomotive Scroll.

Updated Jun 30, 2026
One-click install
npx skills add https://github.com/ayofemiade/cleva --skill locomotive-scroll-ayofemiade
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: locomotive-scroll
Source: https://github.com/ayofemiade/cleva/tree/main/.claude/skills/locomotive-scroll
Command: npx skills add https://github.com/ayofemiade/cleva --skill locomotive-scroll-ayofemiade

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires locomotive-scroll, gsap, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve? Building immersive scrolling websites with smooth scroll, parallax depth, and scroll-triggered animations requires coordinating many data attributes, configuration options, and event handlers, and integrating with GSAP ScrollTrigger adds further complexity. ## Core Features & Use Cases - Smooth Scrolling & Parallax: Configure hardware-accelerated smooth scroll with lerp control, multi-speed parallax layers, sticky elements, and horizontal scrolling via data attributes. - Viewport Detection & Events: Track element visibility progress, scroll speed and direction, and trigger callbacks with data-scroll-call for scroll-driven interactions. - GSAP ScrollTrigger Integration: Set up scrollerProxy to combine Locomotive Scroll's smooth scrolling with GSAP timelines, pinning, and scrubbed animations. - Use Case: You are building a storytelling landing page and need a hero section with layered parallax, a sticky sidebar, and fade-in cards that animate as they enter the viewport, all synced with GSAP animations. ## Quick Start Ask the AI to set up Locomotive Scroll with smooth scrolling and parallax effects on your page, optionally generating a configuration with the included scripts.

Frequently Asked Questions about locomotive-scroll

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add smooth scrolling to my website with Locomotive Scroll?▼

Install locomotive-scroll, wrap your content in a div with data-scroll-container, and initialize new LocomotiveScroll with the el option and smooth set to true. Adjust lerp between 0 and 1 to control smoothness, with lower values producing smoother motion.

How to create parallax effects with Locomotive Scroll?▼

Add data-scroll and data-scroll-speed attributes to elements. Values above 1 move faster than scroll, values between 0 and 1 move slower, and negative values reverse direction. Use data-scroll-direction="horizontal" for horizontal parallax.

Does Locomotive Scroll work with GSAP ScrollTrigger?▼

Yes, Locomotive Scroll integrates with GSAP ScrollTrigger through ScrollTrigger.scrollerProxy, which maps scroll position getters and setters to the Locomotive instance. You also sync updates by calling ScrollTrigger.update on Locomotive's scroll event.

Should I disable Locomotive Scroll on mobile devices?▼

Locomotive Scroll supports smartphone and tablet options with breakpoints, letting you disable smooth scrolling on mobile for better performance. Setting smartphone smooth to false is recommended when touch scrolling feels inconsistent or performance degrades.

Why do fixed position elements break with Locomotive Scroll?▼

Fixed positioning breaks because smooth scroll applies transforms to the container. Place fixed elements like navigation outside the data-scroll-container element, or use data-scroll-sticky with data-scroll-target to pin elements within a boundary instead.

Why is my scroll position wrong after adding dynamic content?▼

Locomotive Scroll caches element positions at initialization, so dynamically added content is not tracked. Call the scroll.update() method after DOM changes to recalculate positions, and always call scroll.destroy() on unmount in single-page applications.