skills.rest
alex-jordan547
alex-jordan547COMMUNITY
Explore all skills by this author →
GitHub

scroll-experience

Implements scroll-driven animations, parallax storytelling, and sticky sections for web experiences.

Updated Jul 3, 2026
Search Tags:#storytelling#parallax#framer motion#scroll animation#web experience#gsap scrolltrigger#sticky sections
One-click install
npx skills add https://github.com/alex-jordan547/agent-setup --skill scroll-experience-alex-jordan547
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: scroll-experience
Source: https://github.com/alex-jordan547/agent-setup/tree/main/archive/scroll-experience
Command: npx skills add https://github.com/alex-jordan547/agent-setup --skill scroll-experience-alex-jordan547

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building immersive scroll-driven web experiences requires choosing the right animation library, structuring narrative scroll sections, and avoiding common pitfalls like scroll hijacking and mobile jank, which is difficult without a clear playbook. ## 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 setup code. - Parallax Storytelling Patterns: Provides layer speed ratios, story beat structures, and text reveal techniques for narrative scroll experiences. - Sticky & Pinned Sections: Shows CSS sticky, GSAP pin, and horizontal scroll section implementations for product walkthroughs and galleries. - Anti-Pattern & Accessibility Guardrails: Flags scroll hijacking, animation overload, and desktop-only designs, with fixes for scroll jank and mobile parallax issues. - Use Case: When building an Apple-style product page, use this Skill to set up GSAP ScrollTrigger with pinned sections, layered parallax backgrounds, and scroll-triggered text reveals that degrade gracefully on mobile. ## Quick Start Ask the agent 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 defining trigger element, start and end positions, and scrub to link animation progress to scroll position. This ties element transforms directly to user scrolling.

GSAP ScrollTrigger vs Framer Motion for scroll animations?▼

GSAP ScrollTrigger suits complex, fine-grained scroll animations with pinning and scrubbing, while Framer Motion fits React projects using useScroll and useTransform hooks. CSS scroll-timeline works for simple native reveals without JavaScript dependencies.

How do I build a horizontal scroll section on a webpage?▼

Use GSAP to translate panels by xPercent across the container while pinning the section with ScrollTrigger, setting end based on the container's offsetWidth. This converts vertical scroll into horizontal panel movement.

Why do scroll animations stutter on mobile devices?▼

Scroll jank happens when heavy parallax layers and scrubbed animations overwhelm mobile GPUs. Simplify effects on mobile, reduce layer counts, test on real devices, and apply graceful degradation for touch-based scrolling.

When should I avoid scroll hijacking in web design?▼

Avoid scroll hijacking in all cases because it removes user scroll control, breaks accessibility, and frustrates mobile users. Instead enhance natural scrolling with scrub-linked animations that preserve normal scroll speed and behavior.

Related Skills

Explore More Design & Creative Skills→
ZiadNagarZiadNagar

scroll-experience

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

Community
Advanced
Gull-StackGull-Stack

popup-cro

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

Official
Basic
flatratemechanic1-glitchflatratemechanic1-glitch

Web Animation Patterns

Define layered web animation strategies using CSS, GSAP, and React Three Fiber.

Community
Advanced
RaheesAhmedRaheesAhmed
66

3d-web-experience

Coordinates WebGL tools to build interactive 3D scenes for web projects.

Community
Advanced