skills.rest
ayofemiade
ayofemiadeCOMMUNITY
Explore all skills by this author →
GitHub

locomotive-scroll

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

Updated Jun 30, 2026
Search Tags:#user experience#web design#animations#parallax#scrolling
One-click install
npx skills add https://github.com/ayofemiade/cleva --skill locomotive-scroll-ayofemiade
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: locomotive-scroll
Source: https://github.com/ayofemiade/cleva/tree/main/.claude/skills/locomotive-scroll
Command: npx skills add https://github.com/ayofemiade/cleva --skill locomotive-scroll-ayofemiade

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires locomotive-scroll, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill addresses the challenge of creating engaging and interactive web experiences by enabling smooth scrolling, parallax effects, and scroll-driven animations.

Core Features & Use Cases

  • Smooth Scrolling: Achieve hardware-accelerated smooth scrolling for a seamless user experience.
  • Parallax Effects: Implement parallax effects for depth and motion in your web design.
  • Scroll-Driven Animations: Create animations that trigger based on scroll position.
  • Use Case: Enhance the user experience on a landing page by using parallax effects to create a visually engaging experience that responds to user interaction.

Quick Start

Initialize the Locomotive Scroll with the following code:

const scroll = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: true,
  lerp: 0.1,
  multiplier: 1,
  class: 'is-inview',
  repeat: false,
  offset: [0, 0],
  getSpeed: true,
  getDirection: true,
  smartphone: {
    smooth: false,
    breakpoint: 768
  }
});

Frequently Asked Questions about locomotive-scroll

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

FAQPage Schema
How do I add smooth scrolling and parallax effects to a web page?▼

You add smooth scrolling and parallax effects by integrating the Locomotive Scroll library and initializing it on a container element. This enables hardware-accelerated scrolling and scroll-driven animations for an engaging user experience.

How do I trigger animations based on scroll position?▼

You trigger scroll-driven animations by initializing the scroll instance with the 'is-inview' class. As elements enter the viewport, this class is applied to execute animations based on the current scroll position.

Can I use Locomotive Scroll for horizontal scrolling layouts?▼

Yes, Locomotive Scroll handles both vertical and horizontal scrolling layouts. You can configure the instance to manage interactive scrolling behaviors across different directional axes on your web pages.

Does Locomotive Scroll integrate with GSAP for advanced animations?▼

Yes, Locomotive Scroll integrates with GSAP to create advanced scroll-driven animations. This combination allows you to synchronize complex timeline animations directly with the user's scroll position.

How does smooth scrolling behave on smartphones and mobile devices?▼

Smooth scrolling on smartphones is disabled by default at a breakpoint of 768px. You can configure the smartphone object within the initialization settings to define specific mobile smooth scrolling behaviors.

Do I need to include Locomotive Scroll in my project before using it?▼

Yes, Locomotive Scroll must be included as a dependency in your project before implementation. This Skill requires the base library to be present to enable parallax effects and hardware-accelerated scrolling on web pages.

Related Skills

Explore More Design & Creative Skills→
freshtechbrofreshtechbro
682

locomotive-scroll

Implement smooth scrolling and parallax effects with Locomotive Scroll.

Community
Intermediate
ScarletFishScarletFish

gsap-scrolltrigger

Synchronize GSAP tweens and timelines with browser scroll position.

Community
Intermediate
ayofemiadeayofemiade

gsap-scrolltrigger

Create scroll-driven web animations with GSAP and ScrollTrigger.

Community
Advanced
hii-saikrishnahii-saikrishna

locomotive-scroll

Implement smooth scrolling, parallax effects, and scroll-driven animations with JavaScript and GSAP.

Community
Intermediate