Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
freshtechbro avatar

Locomotive Scroll

freshtechbro/claudedesignskills

  • 1.5k installs
  • 629 repo stars
  • Updated November 20, 2025
  • freshtechbro/claudedesignskills

locomotive-scroll is an agent skill for comprehensive skill for locomotive scroll smooth scrolling library with parallax effects, viewport detection, and scroll-driven animations. use this skill when implementing.

About

The locomotive-scroll skill is designed for comprehensive skill for Locomotive Scroll smooth scrolling library with parallax effects, viewport detection, and scroll-driven animations. Use this skill when implementing. Locomotive Scroll Comprehensive guide for implementing smooth scrolling, parallax effects, and scroll-driven animations using Locomotive Scroll. HTML Structure Every Locomotive Scroll implementation requires specific data attributes: 2. Invoke when the user asks about locomotive scroll or related SKILL.md workflows.

  • 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.

Locomotive Scroll by the numbers

  • 1,485 all-time installs (skills.sh)
  • +99 installs in the week ending Jul 29, 2026 (Skillselion tracking)
  • Ranked #239 of 1,888 Design & UI/UX skills by installs in the Skillselion catalog
  • Security screen: MEDIUM risk (skills.sh audit)
  • Data as of Jul 31, 2026 (Skillselion catalog sync)
At a glance

locomotive-scroll capabilities & compatibility

Capabilities
smooth scrolling: hardware accelerated smooth sc · parallax effects: element level speed control fo · viewport detection: track when elements enter/ex · scroll events: monitor scroll progress for anima
Use cases
frontend
From the docs

What locomotive-scroll says it does

Comprehensive skill for Locomotive Scroll smooth scrolling library with parallax effects, viewport detection, and scroll-driven animations. Use this skill when implementing smooth
SKILL.md
Comprehensive skill for Locomotive Scroll smooth scrolling library with parallax effects, viewport detection, and scroll-driven animations. Use this skill when
SKILL.md
npx skills add https://github.com/freshtechbro/claudedesignskills --skill locomotive-scroll

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs1.5k
repo stars★ 629
Security audit2 / 3 scanners passed
Last updatedNovember 20, 2025
Repositoryfreshtechbro/claudedesignskills ↗

How do I comprehensive skill for locomotive scroll smooth scrolling library with parallax effects, viewport detection, and scroll-driven animations. use this skill when implementing?

Comprehensive skill for Locomotive Scroll smooth scrolling library with parallax effects, viewport detection, and scroll-driven animations. Use this skill when implementing.

Who is it for?

Developers using locomotive scroll workflows documented in SKILL.md.

Skip if: Skip when the task falls outside locomotive-scroll scope or needs a different stack.

When should I use this skill?

User asks about locomotive scroll or related SKILL.md workflows.

What you get

Completed locomotive-scroll workflow with documented commands, files, and expected deliverables.

  • scroll animation components
  • parallax section markup
  • performant motion CSS or JS

By the numbers

  • 739 installs listed on skills.sh

Files

SKILL.mdMarkdownGitHub ↗

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

npm install locomotive-scroll
// 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:

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

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

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

    <!-- Parallax element -->
    <div data-scroll data-scroll-speed="2">
      Moves faster than scroll
    </div>

    <!-- Sticky element -->
    <div data-scroll data-scroll-sticky>
      Sticks within section
    </div>

    <!-- Element with ID for tracking -->
    <div data-scroll data-scroll-id="hero">
      Accessible via JavaScript
    </div>

    <!-- Call event trigger -->
    <div data-scroll data-scroll-call="fadeIn">
      Triggers custom event
    </div>

  </div>
</div>

2. Initialization

const scroll = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: true,
  lerp: 0.1,        // Smoothness (0-1, lower = smoother)
  multiplier: 1,    // Speed multiplier
  class: 'is-inview', // Class added to visible elements
  repeat: false,    // Repeat in-view detection
  offset: [0, 0]    // Global trigger offset [bottom, top]
});

3. Data Attributes

AttributePurposeExample
data-scrollEnable detectiondata-scroll
data-scroll-speedParallax speeddata-scroll-speed="2"
data-scroll-directionParallax axisdata-scroll-direction="horizontal"
data-scroll-stickySticky positioningdata-scroll-sticky
data-scroll-targetSticky boundarydata-scroll-target="#section"
data-scroll-offsetTrigger offsetdata-scroll-offset="20%"
data-scroll-repeatRepeat detectiondata-scroll-repeat
data-scroll-callEvent triggerdata-scroll-call="myFunction"
data-scroll-idUnique identifierdata-scroll-id="hero"
data-scroll-classCustom classdata-scroll-class="is-visible"

Common Patterns

1. Basic Smooth Scrolling

import LocomotiveScroll from 'locomotive-scroll';

const scroll = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: true
});
<div data-scroll-container>
  <div data-scroll-section>
    <h1>Smooth scrolling enabled</h1>
  </div>
</div>

2. Parallax Effects

<!-- Slow parallax -->
<div data-scroll data-scroll-speed="0.5">
  Moves slower than scroll (background effect)
</div>

<!-- Fast parallax -->
<div data-scroll data-scroll-speed="3">
  Moves faster than scroll (foreground effect)
</div>

<!-- Reverse parallax -->
<div data-scroll data-scroll-speed="-2">
  Moves in opposite direction
</div>

<!-- Horizontal parallax -->
<div data-scroll data-scroll-speed="2" data-scroll-direction="horizontal">
  Moves horizontally
</div>

3. Viewport Detection and Callbacks

// Track scroll progress
scroll.on('scroll', (args) => {
  console.log(args.scroll.y); // Current scroll position
  console.log(args.speed);    // Scroll speed
  console.log(args.direction); // Scroll direction

  // Access specific element progress
  if (args.currentElements['hero']) {
    const progress = args.currentElements['hero'].progress;
    console.log(`Hero progress: ${progress}`); // 0 to 1
  }
});

// Call events
scroll.on('call', (value, way, obj) => {
  console.log(`Event triggered: ${value}`);
  // value = data-scroll-call attribute value
  // way = 'enter' or 'exit'
  // obj = {id, el}
});
<div data-scroll data-scroll-id="hero">Hero section</div>
<div data-scroll data-scroll-call="playVideo">Video section</div>

4. Sticky Elements

<!-- Stick within parent section -->
<div data-scroll-section>
  <div data-scroll data-scroll-sticky>
    I stick while section is in view
  </div>
</div>

<!-- Stick with specific target -->
<div id="sticky-container">
  <div data-scroll data-scroll-sticky data-scroll-target="#sticky-container">
    I stick within #sticky-container
  </div>
</div>

5. Programmatic Scrolling

// Scroll to element
scroll.scrollTo('#target-section');

// Scroll to top
scroll.scrollTo('top');

// Scroll to bottom
scroll.scrollTo('bottom');

// Scroll with options
scroll.scrollTo('#target', {
  offset: -100,      // Offset in pixels
  duration: 1000,    // Duration in ms
  easing: [0.25, 0.0, 0.35, 1.0], // Cubic bezier
  disableLerp: true, // Disable smooth lerp
  callback: () => console.log('Scrolled!')
});

// Scroll to pixel value
scroll.scrollTo(500);

6. Horizontal Scrolling

const scroll = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: true,
  direction: 'horizontal'
});
<div data-scroll-container>
  <div data-scroll-section style="display: flex; width: 300vw;">
    <div>Section 1</div>
    <div>Section 2</div>
    <div>Section 3</div>
  </div>
</div>

7. Mobile Responsiveness

const scroll = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: true,

  // Tablet settings
  tablet: {
    smooth: true,
    breakpoint: 1024
  },

  // Smartphone settings
  smartphone: {
    smooth: false, // Disable on mobile for performance
    breakpoint: 768
  }
});

Integration with GSAP ScrollTrigger

Locomotive Scroll and GSAP ScrollTrigger work together for advanced animations:

import LocomotiveScroll from 'locomotive-scroll';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

const locoScroll = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: true
});

// Sync Locomotive Scroll with ScrollTrigger
locoScroll.on('scroll', ScrollTrigger.update);

ScrollTrigger.scrollerProxy('[data-scroll-container]', {
  scrollTop(value) {
    return arguments.length
      ? locoScroll.scrollTo(value, 0, 0)
      : locoScroll.scroll.instance.scroll.y;
  },
  getBoundingClientRect() {
    return {
      top: 0,
      left: 0,
      width: window.innerWidth,
      height: window.innerHeight
    };
  },
  pinType: document.querySelector('[data-scroll-container]').style.transform
    ? 'transform'
    : 'fixed'
});

// GSAP animation with ScrollTrigger
gsap.to('.fade-in', {
  scrollTrigger: {
    trigger: '.fade-in',
    scroller: '[data-scroll-container]',
    start: 'top bottom',
    end: 'top center',
    scrub: true
  },
  opacity: 1,
  y: 0
});

// Update ScrollTrigger when Locomotive updates
ScrollTrigger.addEventListener('refresh', () => locoScroll.update());
ScrollTrigger.refresh();

Instance Methods

const scroll = new LocomotiveScroll();

// Lifecycle
scroll.init();     // Reinitialize
scroll.update();   // Refresh element positions
scroll.destroy();  // Clean up
scroll.start();    // Resume scrolling
scroll.stop();     // Pause scrolling

// Navigation
scroll.scrollTo(target, options);
scroll.setScroll(x, y);

// Events
scroll.on('scroll', callback);
scroll.on('call', callback);
scroll.off('scroll', callback);

Performance Optimization

1. Use `data-scroll-section` to segment long pages:

<div data-scroll-container>
  <div data-scroll-section>Section 1</div>
  <div data-scroll-section>Section 2</div>
  <div data-scroll-section>Section 3</div>
</div>

2. Limit parallax elements - Too many can impact performance

3. Disable on mobile if performance is poor:

smartphone: { smooth: false }

4. Update on resize:

window.addEventListener('resize', () => {
  scroll.update();
});

5. Destroy when not needed:

scroll.destroy();

Common Pitfalls

1. Fixed Positioning Issues

Problem: position: fixed elements break with smooth scroll

Solution: Use data-scroll-sticky instead or add fixed elements outside container:

<!-- Fixed nav outside container -->
<nav style="position: fixed;">Navigation</nav>

<div data-scroll-container>
  <!-- Page content -->
</div>

2. Images Not Lazy Loading

Problem: All images load at once

Solution: Integrate with lazy loading:

<img data-scroll data-src="image.jpg" class="lazy">
scroll.on('call', (func) => {
  if (func === 'lazyLoad') {
    // Trigger lazy load
  }
});

3. Scroll Position Not Updating

Problem: Dynamic content doesn't update scroll positions

Solution: Call update() after DOM changes:

// After adding content
addDynamicContent();
scroll.update();

4. Accessibility Concerns

Problem: Screen readers and keyboard navigation broken

Solution: Provide disable option:

const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

const scroll = new LocomotiveScroll({
  smooth: !prefersReducedMotion
});

5. Memory Leaks

Problem: Scroll instance not cleaned up on route changes (SPAs)

Solution: Always destroy on unmount:

// React example
useEffect(() => {
  const scroll = new LocomotiveScroll();

  return () => scroll.destroy();
}, []);

6. Z-Index Fighting

Problem: Parallax elements overlap incorrectly

Solution: Set explicit z-index on parallax layers:

[data-scroll-speed] {
  position: relative;
  z-index: var(--layer-depth);
}

Related Skills

  • gsap-scrolltrigger: Advanced scroll-driven animations (use together)
  • barba-js: Page transitions with Locomotive Scroll integration
  • scroll-reveal-libraries: Simpler alternative for basic fade-in effects
  • react-three-fiber: Scroll-driven 3D scenes (sync with Locomotive events)
  • motion-framer: Alternative scroll animations in React

Resources

  • Scripts: generate_config.py - Configuration generator, integration_helper.py - GSAP integration code
  • References: api_reference.md - Complete API, gsap_integration.md - GSAP ScrollTrigger patterns
  • Assets: starter_locomotive/ - Complete starter template with examples

Related skills

anthropicsFrontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.698k164kvercel-labsWeb Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.486k29.4klarksuiteLark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst382k15.8ksleekdotdesignSleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k470leonxlnxDesign Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.284k66.9knextlevelbuilderUi Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.282k109k

How it compares

Pick locomotive-scroll when you need agent-generated scroll parallax code rather than static design mockups without implementation.

FAQ

What does locomotive-scroll do?

Comprehensive skill for Locomotive Scroll smooth scrolling library with parallax effects, viewport detection, and scroll-driven animations. Use this skill when implementing.

When should I use locomotive-scroll?

User asks about locomotive scroll or related SKILL.md workflows.

Is locomotive-scroll safe to install?

Review the Security Audits panel on this page before installing in production.

Design & UI/UXui
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.