Can I use this for horizontal scrolling sections?

Absolutely, it includes specific patterns for creating pinned horizontal scroll containers and multi-panel transitions using GSAP and CSS.

How does this skill handle scroll hijacking?

It explicitly defines scroll hijacking as an anti-pattern. The skill focuses on enhancing natural scroll behavior and using scrub animations rather than replacing user control.

Does this skill support mobile-responsive scroll animations?

Yes, it prioritizes mobile-first design and provides strategies for simplified effects, performance optimization, and graceful degradation on touch devices.

Which libraries does the Scroll Experience skill recommend?

It provides implementation patterns for GSAP (ScrollTrigger), Framer Motion, Locomotive Scroll, Lenis, and native 2024+ CSS scroll-timelines.

Scroll Experience Architect

Name: Scroll Experience Architect
Author: claudiodearaujo

byclaudiodearaujo

0•

Design Tools

Creates immersive, scroll-driven web experiences using parallax, interactive storytelling, and cinematic animations.

This skill transforms standard web navigation into a narrative journey by implementing sophisticated scroll-driven animations and parallax effects. It provides expert guidance on integrating industry-standard tools like GSAP and Framer Motion, ensuring high-performance visual impact without compromising user experience. Whether you're building a cinematic product launch page or an interactive editorial piece, this skill helps you balance complex animations with accessibility and mobile responsiveness while avoiding common pitfalls like scroll hijacking.

Key Features

010 GitHub stars

02Design of multi-layer parallax storytelling with specific depth speeds

03Implementation of advanced GSAP ScrollTrigger and Framer Motion animations

04Configuration of sticky sections and complex horizontal scrolling layouts

05Native CSS scroll-timeline integration for modern, lightweight effects

06Performance optimization and accessibility-first scroll design patterns

Use Cases

01Creating cinematic web portfolios with fluid scroll-triggered reveals

02Building immersive Apple-style product landing pages

03Developing interactive editorial narratives and digital storytelling

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add claudiodearaujo/izacenter scroll-experience

For use in Claude.ai and ChatGPT

Key Features

010 GitHub stars

02Design of multi-layer parallax storytelling with specific depth speeds

03Implementation of advanced GSAP ScrollTrigger and Framer Motion animations

04Configuration of sticky sections and complex horizontal scrolling layouts

05Native CSS scroll-timeline integration for modern, lightweight effects

06Performance optimization and accessibility-first scroll design patterns

Use Cases

01Creating cinematic web portfolios with fluid scroll-triggered reveals

02Building immersive Apple-style product landing pages

03Developing interactive editorial narratives and digital storytelling

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add claudiodearaujo/izacenter scroll-experience

For use in Claude.ai and ChatGPT