Locomotive Scroll

This is your go-to for building those smooth, Apple-style scrolling experiences with parallax effects and scroll-triggered animations. It covers Locomotive Scroll's full API including viewport detection, sticky elements, horizontal scrolling, and GSAP ScrollTrigger integration for advanced animations. The skill includes the complete data attribute system (speed, direction, sticky, call events) and shows you how to handle programmatic scrolling and mobile responsiveness. One honest take: scroll-hijacking libraries like this can hurt accessibility and feel weird on mobile, so the skill explicitly covers detection and disable patterns. Use this when you're building immersive landing pages or storytelling sites where the scroll experience is a key part of the design, not just a utilitarian page.

skills.sh installs: 2.7K
GitHub stars: 1.3K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add freshtechbro/claudedesignskills --skill locomotive-scroll --agent claude-code

Installs into .claude/skills of the current project.

Files

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: