skills.rest
ratnesh-maurya
ratnesh-mauryaCOMMUNITY
Explore all skills by this author →
Website𝕏@_ratneshmauryaGitHub

scroll-experience

Implements scroll-driven animations, parallax storytelling, and sticky sections using GSAP, Framer Motion, and CSS.

1|Updated Aug 17, 2025
Search Tags:#landing page#parallax#framer motion#scroll animation#interactive narrative#gsap scrolltrigger#sticky sections
One-click install
npx skills add https://github.com/ratnesh-maurya/mdconverter --skill scroll-experience-ratnesh-maurya
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: scroll-experience
Source: https://github.com/ratnesh-maurya/mdconverter/tree/main/.claude/skills/scroll-experience
Command: npx skills add https://github.com/ratnesh-maurya/mdconverter --skill scroll-experience-ratnesh-maurya

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building immersive scroll-driven web experiences requires choosing the right animation libraries, structuring parallax layers, and avoiding common pitfalls like scroll hijacking and mobile jank, which is difficult without expert guidance. ## Core Features & Use Cases - Scroll Animation Stack Guidance: Compares GSAP ScrollTrigger, Framer Motion, Locomotive Scroll, Lenis, and native CSS scroll-timeline with ready-to-use code patterns. - Parallax Storytelling Patterns: Provides layer speed ratios, story beat structures, and text reveal techniques for narrative-driven pages. - Sticky & Pinned Sections: Includes CSS sticky, GSAP pin, and horizontal scroll section implementations for product walkthroughs and galleries. - Anti-Pattern Warnings: Documents scroll hijacking, animation overload, and desktop-only mistakes with accessible alternatives. - Use Case: A developer building an Apple-style product landing page can use the GSAP ScrollTrigger and horizontal scroll patterns to create pinned feature walkthroughs with parallax depth. ## Quick Start Ask the AI to build a scroll-driven landing page section with parallax layers and a pinned horizontal scroll gallery using GSAP ScrollTrigger.

Frequently Asked Questions about scroll-experience

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

FAQPage Schema
How do I create scroll-triggered animations with GSAP ScrollTrigger?▼

Register the ScrollTrigger plugin with gsap.registerPlugin, then attach a scrollTrigger config to any tween specifying trigger element, start and end positions, and scrub to link animation progress to scroll position.

GSAP ScrollTrigger vs Framer Motion for scroll animations?▼

GSAP ScrollTrigger suits complex, fine-grained animations with pinning and scrubbing, while Framer Motion fits React projects using useScroll and useTransform hooks. Framer Motion has a lower learning curve; GSAP offers more control.

Can I use CSS scroll-timeline instead of JavaScript libraries?▼

Yes, CSS animation-timeline: view() enables native scroll-driven animations without JavaScript for simple reveal effects. It works in modern browsers (2024+) but lacks the advanced pinning and scrubbing control of GSAP.

Why do parallax animations break or stutter on mobile devices?▼

Mobile browsers handle scroll events differently and have limited GPU capacity, causing jank with heavy parallax. Use simpler effects on mobile, test on real devices, and apply graceful degradation rather than desktop-level animations.

How do I make a horizontal scroll section on a vertical page?▼

Pin a container with GSAP ScrollTrigger and translate its panels horizontally using xPercent tied to scroll progress. Set the end distance based on the container's width so scrolling vertically moves content sideways.

When should I avoid scroll hijacking in web design?▼

Always avoid it. Scroll hijacking removes user control, harms accessibility, and frustrates mobile users. Instead enhance natural scrolling with scrub-linked animations that keep normal scroll speed and behavior intact.

Related Skills

Explore More Design & Creative Skills→
roviczzzroviczzz
1

scroll-experience

Create scroll-driven animations and parallax storytelling for cinematic web pages.

Community
Advanced
Gull-StackGull-Stack

popup-cro

Generate popup copy, design notes, and A/B test ideas for conversion optimization.

Official
Basic
truongnattruongnat

3d-motion-pro

Build Three.js/WebGL scenes with GLTF models, GLSL shaders, and WebXR.

Community
Advanced
ZiadNagarZiadNagar

scroll-experience

Build scroll-driven web narratives with parallax and scroll-triggered animations.

Community
Advanced