Skip to main content
affpapa.org
RU EN
skill

scroll-experience · davila7 — Claude Code skill: what it does, how to install

Guides the setup of scroll animations, parallax depth, and product reveals. Useful when designing interactive story layouts linked directly to viewport movement.

Install into Claude Code · claude-code-templates All methods and platforms ↓ 
npx claude-code-templates@latest --skill creative-design/scroll-experience
Open on GitHub

What scroll-experience does

This skill guides developers through creating scroll-driven web interfaces where movement dictates the narrative flow. It provides architectural patterns for multiple technologies, including GSAP ScrollTrigger, Framer Motion for React applications, and modern CSS using animation-timeline. For smooth scrolling setups, it suggests Lenis or Locomotive Scroll.

Implementation guides cover layered depth with distinct speeds, horizontal sections, and pinned containers. It lays out narrative pacing across five beats, from the initial hook to the final call to action.

Scroll hijacking ruins touch interactions and accessibility. Overriding default browser scrolling is flagged as a major mistake.

What it helps with

  • set up multi-layered parallax with custom layer speeds
  • pin sections during page movement using GSAP Pin
  • build a horizontal scrolling container for product tours
  • link native CSS keyframes to the viewport via animation-timeline

Example prompts for the agent

  • Set up a GSAP ScrollTrigger parallax section with slower background movement and faster foreground depth
  • Implement a pinned horizontal gallery that scrolls sideways as the user moves down
  • Create scroll-linked opacity and movement transitions using Framer Motion

How to install scroll-experience

1claude-code-templates

npx claude-code-templates@latest --skill creative-design/scroll-experience

2Skills CLI (Vercel)

npx skills add davila7/claude-code-templates --skill scroll-experience -a claude-code

3Manually: put the files in place

~/.claude/skills/scroll-experience/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/scroll-experience/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about scroll-experience

How to install scroll-experience in Claude Code?

Run npx claude-code-templates@latest --skill creative-design/scroll-experience. This command adds the skill directly to your Claude Code setup.

What does the scroll-experience skill do?

It guides the architecture of scroll-driven narratives, pinned panels, and layered depth. The skill provides code patterns for GSAP, Framer Motion, and native CSS without breaking standard browser scrolling.

Which animation libraries does the skill cover?

It provides setups for GSAP ScrollTrigger, Framer Motion, Lenis, Locomotive Scroll, and modern CSS view timelines.

Similar skills

All skills for Frontend and UI →

scroll-experience by other authors comes first.

scroll-experience sickn33 This skill guides an agent through scroll animations, parallax scenes, and interactive web narratives. Use it when scrolling should reveal part of a page’s story. CX Codex +1 2,000installs framer-motion-scroll C-Jeril A Framer Motion skill that tells your agent how to build scroll-linked animations, parallax and progress indicators. CX Codex +1 803installs locomotive-scroll freshtechbro This skill guides an agent through Locomotive Scroll setup for smooth scrolling, parallax, and scroll-driven motion. Use it when page elements need viewport tracking or scroll events. CX Codex +1 2,500installs scroll-scrubbed-word-reveal MengTo A skill that reveals words in marked-up text as scroll progress advances. Built for headlines, quotes and onboarding copy. CX Codex +1 1,400installs gsap-framer-scroll-animation official Utkarsh Patrikar This skill helps GitHub Copilot build scroll-driven motion with GSAP ScrollTrigger and Framer Motion. Use it for vanilla JS, React, or Next.js work. 3,900installs animation-on-scroll MengTo A skill that wires up scroll-reveal with IntersectionObserver, plus Tailwind animation classes and keyframes. CX Codex +1 2,000installs scroll-animations dylantarre A skill for animations tied to scrolling: reveal effects, parallax, sticky headers, progress bars. Useful when the page should react to scroll instead of just moving. CX Codex +1 1,100installs

From the same set495

The whole set →
devops-troubleshooter This subagent investigates logs, deployment failures, and monitoring issues. Use it to trace an incident and work out a fix. 2,328installs dependency-checker A PostToolUse hook that runs a package audit after you touch a dependency file, so outdated or vulnerable packages surface right away. 2,314installs security-scanner This hook runs a security pass whenever Claude edits or writes a file. It looks for vulnerabilities and hardcoded secrets. 2,256installs nextjs-code-quality-enforcer A PostToolUse hook that checks every Next.js file you write: App Router structure, Server and Client Component directives, imports, types. It runs right after an edit. 2,249installs react-performance-optimizer This subagent tracks down unnecessary renders, optimizes bundle chunking, and tunes Core Web Vitals in React apps. Useful when web pages lag during heavy UI updates. 2,081installs add-changelog Generates and maintains CHANGELOG.md using the Keep a Changelog format. Reads recent commits and git tags to structure release notes. 2,025installs unused-code-cleaner A subagent that finds unused imports, functions and classes and removes them one at a time, validating after each step. Handy after a refactor or before a production deploy. 1,990installs report-generator Converts collected research notes into an organized Markdown document with numbered citations. It takes over at the final stage once all investigation data is ready. 1,930installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor