scroll-experience

Expert in building immersive scroll-driven experiences - parallax storytelling, scroll animations, interactive narratives, and cinematic web experiences. Like NY Times interactives, Apple product pages, and award-winning web experiences. Makes websites feel like experiences, not just pages. Use when: scroll animation, parallax, scroll storytelling, interactive story, cinematic website.

1. Zainstaluj skill scroll-experience w swoim projekcie Claude/Codex/Copilot, wskazując repozytorium davila7 z folderu creative-design.

2. Zdefiniuj cel swojej strony — czy chcesz parallax storytelling (jak NY Times), cinematic reveal (jak Apple), czy interactive narrative z progress tracking. Opisz, jakie elementy mają się animować przy scrollowaniu.

3. Wybierz bibliotekę animacji na podstawie kontekstu projektu: GSAP ScrollTrigger dla zaawansowanych efektów, Framer Motion jeśli pracujesz w React, Locomotive Scroll do pełnego kontrolowania smooth scroll z parallax, Lenis dla lekkiego smooth scroll, lub CSS scroll-timeline dla natywnych, prostych animacji.

4. Skonfiguruj trigger points — określ, kiedy animacja powinna się zacząć (np. 'top center') i skończyć (np. 'bottom center'). Użyj scrub: true aby połączyć animację bezpośrednio z pozycją scroll użytkownika.

5. Zaimplementuj scroll-driven reveals, sticky sections lub progress indicators zgodnie z narracją swojej strony. Testuj wydajność — balansuj między wizualnym impact a płynnym scrollowaniem.

6. Iteruj na podstawie feedback — dostosuj timing animacji, intensywność parallax i trigger points, aby doświadczenie czuło się naturalne i nie przytłaczające dla użytkownika.