IntermediateAnimasyon30 dak22 May 2026

GSAP Kaydırma Animasyonları, Zevkle

Ziyaretçileri hareket hastası etmeden pahalı hissettiren kaydırma açılışları: kapsam, stagger'lar, easing'ler ve reduced-motion sözleşmesi.

Zevk çerçevesi

Animasyon yemek değil baharattır. Her sitede uyguladığım üç kural:

  • Sadece transform ve opacity. top, left, width, height asla anime edilmez — her karede layout tetikler.
  • Bölüm başına tek giriş pattern’i. stagger: 0.1 ile y: 20 → 0 fade-up zanaat gibi okunur; beş farklı giriş kaos gibi okunur.
  • prefers-reduced-motion’a saygı. Tartışılmaz.

React’te kapsamlı, temizlenen GSAP

useGSAP(() => {
  gsap.fromTo(".card",
    { y: 20, opacity: 0 },
    {
      scrollTrigger: { trigger: containerRef.current, start: "top 85%" },
      y: 0, opacity: 1, duration: 0.6, stagger: 0.1, ease: "back.out(1.5)",
    }
  );
}, { scope: containerRef });

scope size selector kapsamı ve otomatik temizlik verir — rota değişimlerinde sızan ScrollTrigger’lar olmaz.

İnsan hissi veren easing’ler

Ease Hissi
power3.out kendinden emin varış
back.out(1.5) oyuncu zıplama
elastic.out(1, 0.5) site başına en fazla bir kez

Elastik zıplama baharat kavanozudur, sos şişesi değil.

Eğitimler