skills.rest
TumeloRamaphosa
TumeloRamaphosaCOMMUNITY
Explore all skills by this author →
GitHub

locomotive-scroll

Implement smooth scrolling with parallax and GSAP ScrollTrigger integration.

Updated May 7, 2026
Search Tags:#gsap#parallax#scrolltrigger#viewport detection#locomotive-scroll#smooth scrolling#sticky elements
One-click install
npx skills add https://github.com/TumeloRamaphosa/StudEx-Valley-OS --skill locomotive-scroll-tumeloramaphosa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: locomotive-scroll
Source: https://github.com/TumeloRamaphosa/StudEx-Valley-OS/tree/main/.claude/skills/claudedesignskills/plugins/bundles/extended-3d-scroll/skills/locomotive-scroll
Command: npx skills add https://github.com/TumeloRamaphosa/StudEx-Valley-OS --skill locomotive-scroll-tumeloramaphosa

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

This Skill helps you implement smooth scrolling experiences with parallax, viewport detection, and scroll-driven animations so your pages feel more immersive and responsive.

Core Features & Use Cases

  • Smooth scrolling & easing: Creates a fluid, hardware-accelerated scroll experience for long-form layouts.
  • Parallax & horizontal/vertical motion: Drives element-level depth and directional movement using data-scroll-speed and data-scroll-direction.
  • Viewport detection & callbacks: Tracks when elements enter/exit view using data-scroll-id and triggers logic via data-scroll-call.
  • Sticky elements during scroll: Uses data-scroll-sticky and boundaries to pin content naturally within sections.
  • GSAP ScrollTrigger integration: Enables advanced timelines, scrubbing, pinning, and synchronization with Locomotive’s scroller.

Use it when building landing pages, narrative/story websites, product showcases, or interactive sections that need synchronized animation, parallax depth, and scroll-triggered effects.

Quick Start

Configure Locomotive Scroll on your page by using the required markup with data-scroll-container and data-scroll-section, then initialize LocomotiveScroll targeting the container with smooth scrolling enabled.

Frequently Asked Questions about locomotive-scroll

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

FAQPage Schema
How do I implement smooth scrolling with parallax effects for a long-form landing page?▼

Smooth scrolling with parallax is implemented by initializing Locomotive Scroll on a data-scroll-container and applying data attributes like data-scroll and data-scroll-speed to drive element depth and fluid motion across long-form layouts.

Can I use GSAP ScrollTrigger with locomotive-scroll for scroll-driven animations?▼

GSAP ScrollTrigger integrates with locomotive-scroll via a scroller proxy and update synchronization, enabling advanced timelines, scrubbing, and pinning while maintaining precise scroll-driven animation detection.

How do I trigger callbacks when elements enter the viewport during smooth scrolling?▼

Viewport detection callbacks are triggered by assigning data-scroll-id to track elements and using data-scroll-call to execute custom logic when those elements enter or exit the viewport during smooth scrolling.

What is the best way to create sticky elements that stay pinned during scroll within specific sections?▼

Sticky elements are created using the data-scroll-sticky attribute alongside section boundaries, allowing content to pin naturally within defined sections during smooth scrolling without breaking the layout.

Does locomotive-scroll support horizontal scrolling layouts alongside vertical movement?▼

Locomotive-scroll supports horizontal scrolling layouts by using data-scroll-direction to drive directional movement, enabling both vertical and horizontal motion within immersive scroll-driven web interfaces.

Why does my GSAP ScrollTrigger animation desync from my smooth scrolling container?▼

GSAP ScrollTrigger desyncs from smooth scrolling when the scroller proxy is not configured or update synchronization is missing, requiring Locomotive Scroll's update method to be called on scroll events.

Related Skills

Explore More Software Engineering Skills→
freshtechbrofreshtechbro
682

locomotive-scroll

Implement smooth scrolling and parallax effects with Locomotive Scroll.

Community
Intermediate
MicrockMicrock

gsap-scrolltrigger

Implement scroll-driven animations with GSAP ScrollTrigger for pinning and scrubbing.

Community
Intermediate
fyunusafyunusa

locomotive-scroll

Implement smooth scrolling, parallax effects, and viewport detection with Locomotive Scroll.

Community
Intermediate
ayofemiadeayofemiade

locomotive-scroll

Integrate Locomotive Scroll for smooth scrolling, parallax effects, and scroll-driven animations.

Community
Intermediate