# Locomotive Scroll

Comprehensive skill for Locomotive Scroll smooth scrolling library with parallax...

- Repository: https://github.com/freshtechbro/claudedesignskills (1210 stars)
- Category: Design
- License: MIT
- Last updated: 2025-11-20
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add freshtechbro/claudedesignskills --skill locomotive-scroll -g -a claude-code -y`
Codex: `npx skills add freshtechbro/claudedesignskills --skill locomotive-scroll -g -a codex -y`
Cursor: `npx skills add freshtechbro/claudedesignskills --skill locomotive-scroll -g -a cursor -y`
Gemini CLI: `npx skills add freshtechbro/claudedesignskills --skill locomotive-scroll -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add freshtechbro/claudedesignskills`

## Description

Comprehensive skill for Locomotive Scroll smooth scrolling library with parallax effects, viewport detection, and scroll-driven animations. Use this skill when implementing smooth scrolling experiences, creating parallax effects, building scroll-triggered animations, or developing immersive scrolling websites. Triggers on tasks involving Locomotive Scroll, smooth scrolling, parallax, scroll detection, scroll events, sticky elements, horizontal scrolling, or GSAP ScrollTrigger integration. Integrates with GSAP for advanced scroll-driven animations.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Locomotive Scroll

Comprehensive guide for implementing smooth scrolling, parallax effects, and scroll-driven animations using Locomotive Scroll.

## Overview

Locomotive Scroll is a JavaScript library that provides:
- **Smooth scrolling**: Hardware-accelerated smooth scroll with customizable easing
- **Parallax effects**: Element-level speed control for depth
- **Viewport detection**: Track when elements enter/exit viewport
- **Scroll events**: Monitor scroll progress for animation synchronization
- **Sticky elements**: Pin elements within defined boundaries
- **Horizontal scrolling**: Support for horizontal scroll layouts

**When to use Locomotive Scroll:**
- Building immersive landing pages with parallax
- Creating smooth, Apple-style scroll experiences
- Implementing scroll-triggered animations
- Developing narrative/storytelling websites
- Adding depth and motion to long-form content

**Trade-offs:**
- Scroll-hijacking can impact accessibility (provide disable option)
- Performance overhead on low-end devices (detect and disable)
- Mobile touch scrolling feels different (test extensively)
- Fixed positioning requires workarounds

## Installation

```bash
npm install locomotive-scroll
```

```javascript
// ES6
import LocomotiveScroll from 'locomotive-scroll';
import 'locomotive-scroll/dist/locomotive-scroll.css';

// Or via CDN
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll/dist/locomotive-scroll.min.css">
<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll/dist/locomotive-scroll.min.js"></script>
```

## Core Concepts

### 1. HTML Structure

Every Locomotive Scroll implementation requires specific data attributes:

```html
<!-- Scroll container (required) -->
<div data-scroll-container>

  <!-- Scroll sections (optional, improves performance) -->
  <div data-scroll-section>

    <!-- Tracked elements -->
    <h1 data-scroll>Basic detection</h1>

The rest: https://github.com/freshtechbro/claudedesignskills/blob/HEAD/.claude/skills/locomotive-scroll/SKILL.md