locomotive-scroll

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

Updated Jul 1, 2026

Search Tags:#gsap #parallax #web-animation #scroll-trigger #smooth-scrolling #locomotive-scroll

Ready to run

npx skills add https://github.com/fyunusa/wazobia-banks-frontend --skill locomotive-scroll-fyunusa

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: locomotive-scroll
Source: https://github.com/fyunusa/wazobia-banks-frontend/tree/main/claudedesignskills-main/plugins/bundles/extended-3d-scroll/skills/locomotive-scroll
Command: npx skills add https://github.com/fyunusa/wazobia-banks-frontend --skill locomotive-scroll-fyunusa

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?

This skill solves the challenge of creating high-performance, immersive web experiences that require smooth scrolling, complex parallax effects, and precise viewport-based animations without sacrificing accessibility or performance.

Core Features & Use Cases

Smooth Scrolling: Provides hardware-accelerated, customizable smooth scroll behavior.
Advanced Parallax: Enables element-level speed control for depth and motion effects.
Scroll-Driven Animations: Integrates seamlessly with GSAP ScrollTrigger for complex, synchronized animations.
Use Case: Perfect for building narrative-driven landing pages, portfolio sites, or any project requiring Apple-style scroll interactions.

Quick Start

Initialize the locomotive scroll instance by selecting the main container element and configuring the smooth scroll settings in your main JavaScript file.

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 and parallax effects for a web landing page?▼

Smooth scrolling and parallax effects are implemented using the Locomotive Scroll library to provide hardware-accelerated scroll behavior and element-level speed control. This creates an immersive web interface without sacrificing accessibility or performance.

Can I synchronize GSAP ScrollTrigger animations with smooth scroll progress?▼

Yes, GSAP ScrollTrigger integrates seamlessly with smooth scroll progress to synchronize complex motion sequences. This allows precise viewport-based animations and sticky element positioning driven by user scroll behavior.

Does this smooth scrolling approach work for narrative-driven portfolio sites?▼

Yes, this smooth scrolling approach is specifically designed for narrative-driven landing pages and portfolio sites. It facilitates Apple-style scroll interactions by combining advanced parallax, viewport detection, and scroll-triggered animations.

What is the best way to set up Locomotive Scroll on a web container element?▼

To set up Locomotive Scroll, initialize the instance by selecting the main container element in your main JavaScript file. Configure the smooth scroll settings to establish the foundation for scroll-driven animations and viewport detection.

Why use Locomotive Scroll instead of native CSS smooth scrolling?▼

Locomotive Scroll provides advanced features beyond native CSS smooth scrolling, including element-level parallax speed control, viewport detection, and seamless integration with GSAP ScrollTrigger for complex, synchronized motion sequences.