Which libraries are supported for scroll effects?

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

Can I create horizontal scrolling sections?

Yes, it provides specific code patterns for creating pinned horizontal scroll sections using GSAP and CSS sticky positioning.

How does this help avoid 'scroll hijacking'?

The skill emphasizes enhancing the native scroll experience rather than replacing it, focusing on scrub-based animations that maintain natural user control and speed.

Does this skill support mobile-friendly scroll animations?

Yes, the skill prioritizes mobile-first design and provides strategies to ensure smooth performance and accessibility on touch devices through graceful degradation.

Immersive Scroll Experiences

Name: Immersive Scroll Experiences
Author: claudiodearaujo

byclaudiodearaujo

디자인 도구

Builds high-performance, cinematic scroll-driven web experiences using advanced parallax and animation techniques.

소개

The Immersive Scroll Experiences skill enables developers to transform standard web pages into engaging narrative journeys. By leveraging industry-leading tools like GSAP ScrollTrigger, Framer Motion, and native CSS scroll-timeline, it provides architectural guidance for creating parallax effects, sticky sections, and scroll-triggered reveals. This skill focuses on the 'Golden Mean' of web animation: creating high-impact visual storytelling while maintaining performance, accessibility, and natural scroll behavior to avoid common pitfalls like scroll-hijacking.

주요 기능

Integration with GSAP ScrollTrigger and Framer Motion
Performance-optimized horizontal scroll and cinematic transitions
Advanced parallax storytelling and multi-layer depth effects
0 GitHub stars
Native CSS scroll-timeline and view-timeline patterns
Scroll-triggered reveals and sticky section implementation

사용 사례

Building long-form interactive journalism and narrative storytelling
Creating cinematic product launch pages with scroll-synced animations
Developing immersive portfolio sites with smooth parallax transitions

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add claudiodearaujo/izacenter scroll-experience

For use in Claude.ai and ChatGPT

Download Skill

GitHub

소개