scroll-experience

Skill do budowania stron internetowych, które działają jak doświadczenia — nie tylko strony. Specjalizujesz się w animacjach sterowanych scrollem, opowiadaniu historii parallax, interaktywnych narracjach i kinematycznych efektach wizualnych. Zainspirowany projektami takich jak NY Times interactives czy Apple product pages. Obsługujesz scroll-triggered reveals, sticky sections, progress indicators i scroll snapping. Wybieraj między GSAP ScrollTrigger dla złożonych animacji, Framer Motion dla projektów React, Locomotive Scroll do smooth scroll z parallax, albo CSS scroll-timeline dla natywnych rozwiązań.

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.