Scroll Animations Best Practices

Animacja odpala się jednorazowo gdy element wchodzi lub wychodzi z viewportu. Typowe zastosowania: fade-in sekcji, pojawianie się kart, counter-up.

Wartość animacji jest płynnie powiązana z pozycją scrolla. Elementy reagują w czasie rzeczywistym na każdy piksel przewinięcia.

1const observer = new IntersectionObserver(
2  ([entry]) => {
3    if (entry.isIntersecting) {
4      entry.target.classList.add('visible');
5      observer.unobserve(entry.target); // once
6    }
7  },
8  { threshold: 0.5 }
9);
10
11document.querySelectorAll('.animate-on-scroll')
12  .forEach(el => observer.observe(el));

Zbyt wiele intensywnych efektów parallax i pinning tworzy wrażenie przeciążenia i spowalnia stronę.

Szanuj ustawienia systemowe użytkownika. Zastępuj złożone animacje prostym fade lub wyłączaj je całkowicie.

Pinning sekcji powinien mieć jasny koniec. Dodaj przycisk "skip" do długich scroll-storytelling.

1function useReducedMotion() {
2  const [reduced, setReduced] = useState(false);
3
4  useEffect(() => {
5    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
6    setReduced(mq.matches);
7    const handler = (e: MediaQueryListEvent) => setReduced(e.matches);
8    mq.addEventListener('change', handler);
9    return () => mq.removeEventListener('change', handler);
10  }, []);
11
12  return reduced;
13}
14
15// Użycie w komponencie:
16function AnimatedSection() {
17  const reduced = useReducedMotion();
18
19  return (
20    <motion.div
21      initial={{ opacity: 0, y: reduced ? 0 : 30 }}
22      whileInView={{ opacity: 1, y: 0 }}
23      transition={{ duration: reduced ? 0.3 : 0.8 }}
24    />
25  );
26}

1import dynamic from 'next/dynamic';
2
3// Komponent animacyjny ładowany tylko po stronie klienta
4const ScrollAnimation = dynamic(
5  () => import('./ScrollAnimation'),
6  { ssr: false }
7);
8
9// Server Component — może renderować layout
10export default function HeroSection() {
11  return (
12    <section>
13      <h1>Hero Title</h1>
14      <ScrollAnimation /> {/* Client-only */}
15    </section>
16  );
17}

1import { useGSAP } from '@gsap/react';
2import gsap from 'gsap';
3import { ScrollTrigger } from 'gsap/ScrollTrigger';
4
5gsap.registerPlugin(ScrollTrigger);
6
7function AnimatedSection() {
8  const containerRef = useRef<HTMLDivElement>(null);
9
10  // useGSAP automatycznie czyści WSZYSTKIE animacje
11  // i ScrollTriggery stworzone wewnątrz callbacka
12  useGSAP(() => {
13    gsap.from('.card', {
14      y: 60,
15      opacity: 0,
16      stagger: 0.1,
17      scrollTrigger: {
18        trigger: containerRef.current,
19        start: 'top 80%',
20      },
21    });
22  }, { scope: containerRef }); // scope = cleanup boundary
23
24  return <div ref={containerRef}>...</div>;
25}

1import Lenis from 'lenis';
2import gsap from 'gsap';
3import { ScrollTrigger } from 'gsap/ScrollTrigger';
4
5gsap.registerPlugin(ScrollTrigger);
6
7// 1. Inicjalizacja Lenis
8const lenis = new Lenis({ duration: 1.2 });
9
10// 2. Podpięcie do ScrollTrigger
11lenis.on('scroll', ScrollTrigger.update);
12
13// 3. Synchronizacja z GSAP ticker
14gsap.ticker.add((time) => {
15  lenis.raf(time * 1000);
16});
17
18// 4. Wyłączenie lag smoothing dla idealnej synchronizacji
19gsap.ticker.lagSmoothing(0);

1// Pre-tworzenie settera — wykonaj RAZ
2const moveX = gsap.quickTo('.element', 'x', {
3  duration: 0.3,
4  ease: 'power2.out',
5});
6
7// W scroll handler — tylko podaj wartość
8ScrollTrigger.create({
9  onUpdate: (self) => {
10    moveX(self.progress * 500); // ultra-wydajne
11  },
12});

1gsap.to('.hero-content', {
2  y: -100,
3  opacity: 0,
4  ease: 'none',
5  scrollTrigger: {
6    trigger: '.hero-wrapper',
7    start: 'top top',        // trigger.top = viewport.top
8    end: 'bottom top',       // trigger.bottom = viewport.top
9    scrub: true,             // scroll-linked (nie triggered)
10    pin: true,               // pin sekcji podczas animacji
11    markers: true,           // DEBUG: wizualizacja start/end
12    anticipatePin: 1,        // zapobieganie scroll jump
13  },
14});

1import { motion } from 'framer-motion';
2
3function FadeInCard({ children }) {
4  return (
5    <motion.div
6      initial={{ opacity: 0, y: 40 }}
7      whileInView={{ opacity: 1, y: 0 }}
8      viewport={{ once: true, margin: '-100px' }}
9      transition={{
10        duration: 0.6,
11        ease: [0.16, 1, 0.3, 1], // custom ease-out
12      }}
13    >
14      {children}
15    </motion.div>
16  );
17}
18
19// viewport options:
20// once: true       — animacja odpala się raz
21// margin: '-100px' — trigger 100px wcześniej
22// amount: 0.5      — 50% elementu musi być widoczne

1import { motion, useScroll, useTransform } from 'framer-motion';
2
3function ParallaxSection() {
4  const ref = useRef(null);
5
6  const { scrollYProgress } = useScroll({
7    target: ref,
8    offset: ['start end', 'end start'],
9    // start end = element.top reaches viewport.bottom
10    // end start = element.bottom reaches viewport.top
11  });
12
13  const y = useTransform(scrollYProgress, [0, 1], [100, -100]);
14  const opacity = useTransform(scrollYProgress, [0, 0.3, 0.7, 1], [0, 1, 1, 0]);
15  const scale = useTransform(scrollYProgress, [0, 0.5, 1], [0.8, 1, 0.95]);
16
17  return (
18    <section ref={ref}>
19      <motion.div style={{ y, opacity, scale }}>
20        <h2>Parallax Content</h2>
21      </motion.div>
22    </section>
23  );
24}

1// JavaScript — tylko toggle klasy
2const observer = new IntersectionObserver(
3  (entries) => {
4    entries.forEach(entry => {
5      entry.target.classList.toggle(
6        'in-view',
7        entry.isIntersecting
8      );
9    });
10  },
11  {
12    threshold: 0.3,
13    rootMargin: '0px 0px -10% 0px', // trigger 10% wcześniej
14  }
15);
16
17document.querySelectorAll('[data-animate]')
18  .forEach(el => observer.observe(el));

1/* Domyślny stan — niewidoczny */
2[data-animate] {
3  opacity: 0;
4  transform: translateY(20px);
5  transition: opacity 0.6s ease-out,
6              transform 0.6s ease-out;
7}
8
9/* Stan po dodaniu klasy przez IO */
10[data-animate].in-view {
11  opacity: 1;
12  transform: translateY(0);
13}
14
15/* Respektuj preferencje użytkownika */
16@media (prefers-reduced-motion: reduce) {
17  [data-animate] {
18    transition: opacity 0.3s ease-out;
19    transform: none;
20  }
21}

1function createScrollAnimation(element) {
2  let active = false;
3  let rafId = null;
4
5  function animate() {
6    if (!active) return;
7
8    const rect = element.getBoundingClientRect();
9    const viewH = window.innerHeight;
10    const progress = 1 - (rect.top / viewH);
11
12    // Bezpośrednia manipulacja DOM — zero frameworku
13    element.style.transform =
14      `translateY(${progress * -50}px) scale(${0.9 + progress * 0.1})`;
15    element.style.opacity = String(Math.min(1, progress * 1.5));
16
17    rafId = requestAnimationFrame(animate);
18  }
19
20  // IO startuje/stopuje pętlę rAF
21  const observer = new IntersectionObserver(([entry]) => {
22    active = entry.isIntersecting;
23    if (active && !rafId) {
24      rafId = requestAnimationFrame(animate);
25    } else if (!active && rafId) {
26      cancelAnimationFrame(rafId);
27      rafId = null;
28    }
29  });
30
31  observer.observe(element);
32  return () => {
33    observer.disconnect();
34    if (rafId) cancelAnimationFrame(rafId);
35  };
36}