skills.rest
sixscripts-ai
sixscripts-aiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

locomotive-scroll

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

Updated Aug 12, 2026
Search Tags:#javascript#parallax#scroll animation#viewport detection#gsap scrolltrigger#locomotive-scroll#smooth scrolling
One-click install
npx skills add https://github.com/sixscripts-ai/agent-arena-voice --skill locomotive-scroll-sixscripts-ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: locomotive-scroll
Source: https://github.com/sixscripts-ai/agent-arena-voice/tree/main/.claude/plugins/claudedesignskills/plugins/bundles/extended-3d-scroll/skills/locomotive-scroll
Command: npx skills add https://github.com/sixscripts-ai/agent-arena-voice --skill locomotive-scroll-sixscripts-ai

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 viewport-triggered animations requires coordinating many data attributes, configuration options, and event handlers, which is error-prone without structured guidance. ## Core Features & Use Cases - Smooth Scrolling & Parallax: Configure hardware-accelerated smooth scroll with lerp control and multi-speed parallax layers using data attributes. - Viewport Detection & Events: Track element visibility, scroll progress, and trigger callbacks via data-scroll-call and scroll events. - GSAP ScrollTrigger Integration: Sync Locomotive Scroll with GSAP for pinned sections, scrubbed timelines, and horizontal scroll animations. - Use Case: Build an Apple-style landing page where the hero title parallaxes at speed 2, a sticky sidebar pins within its section, and cards fade in via GSAP ScrollTrigger as they enter the viewport. ## Quick Start Use the locomotive-scroll skill to set up smooth scrolling with a parallax hero section and scroll-triggered fade-in animations on my landing page.

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 via npm, wrap your content in a div with data-scroll-container, and initialize with new LocomotiveScroll({ el, smooth: 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, integrate them by calling locoScroll.on('scroll', ScrollTrigger.update) and configuring ScrollTrigger.scrollerProxy with the scroll container. Set pinType to 'transform' when smooth scrolling is active so pinned sections work correctly.

Why do fixed position elements break with Locomotive Scroll?▼

Smooth scrolling uses CSS transforms on the container, which breaks position: fixed for children. Place fixed elements like navigation outside the data-scroll-container, or use data-scroll-sticky for pinning within sections instead.

Should I disable Locomotive Scroll on mobile devices?▼

Consider disabling smooth scroll on smartphones via the smartphone: { smooth: false, breakpoint: 768 } option, since scroll-hijacking can feel unnatural on touch devices and hurt performance. Also respect prefers-reduced-motion for accessibility.

Why is my scroll position not updating after adding content?▼

Locomotive Scroll caches element positions at initialization, so dynamically added content is not tracked. Call scroll.update() after DOM changes, and always call scroll.destroy() when unmounting in single-page applications to prevent memory leaks.

Related Skills

Explore More Design & Creative Skills→
mrdulasolutionsmrdulasolutions
1

devlearn-html-css

Create semantic HTML structures with CSS layouts and responsive adjustments.

Community
Basic
jmigralajmigrala

scroll-experience

Build scroll-driven web experiences with parallax layers and scroll-triggered reveals.

Community
Advanced
MengToMengTo
4.5k

cinematic-scroll-storytelling

Coordinate Lenis smooth scrolling with GSAP ScrollTrigger for scroll-driven landing page animations.

Community
Advanced
m-salauddinm-salauddin

framer-motion-animations

Implement scroll-triggered and entrance animations in React with Framer Motion.

Community
Intermediate