Which animation libraries does this skill support?

It provides implementation patterns for GSAP (ScrollTrigger), Framer Motion, Locomotive Scroll, Lenis, and modern native CSS scroll-timeline properties.

How does this skill handle accessibility?

The skill actively discourages scroll hijacking and provides solutions for creating accessible scroll experiences that respect user control and browser expectations.

Does it help with mobile performance?

Yes, it includes specific guidance on mobile-safe parallax techniques and performance optimization to ensure smooth experiences on touch devices.

Can I use this for horizontal scrolling sections?

Absolutely. It contains dedicated patterns for creating horizontal scroll containers using GSAP pinning and CSS layout techniques.

Immersive Scroll Experiences

Name: Immersive Scroll Experiences
Author: claudiodearaujo

byclaudiodearaujo

0•

Design Tools

Builds high-impact web narratives using advanced scroll-driven animations, parallax effects, and cinematic transitions.

This skill acts as a specialized architect for creating interactive, scroll-based web experiences similar to Apple product pages or New York Times interactives. It provides implementation patterns for major animation libraries like GSAP and Framer Motion, as well as native CSS scroll-timeline techniques. By focusing on the balance between visual impact and performance, it helps developers implement parallax storytelling, sticky sections, and horizontal scrolls while avoiding common pitfalls like scroll hijacking and mobile performance issues.

Key Features

01Expert GSAP ScrollTrigger and Framer Motion implementation patterns

02Multi-layered parallax storytelling and depth management guides

030 GitHub stars

04Performance-focused optimization for smooth, jank-free scrolling

05Sticky section logic for interactive product walkthroughs

06Native CSS scroll-timeline and view-timeline configurations

Use Cases

01Creating interactive editorial stories and data journalism experiences

02Building cinematic product launch landing pages with scroll-triggered reveals

03Implementing smooth-scroll portfolios with horizontal section transitions

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add claudiodearaujo/sistema-de-narra-o-de-livro-front scroll-experience

For use in Claude.ai and ChatGPT

Download Skill