IntermediateAnimatsiya30 daq22-may, 2026

GSAP scroll animatsiyalari, did bilan

Tashrif buyuruvchilarni harakatdan charchatmaydigan qimmat taassurotli scroll ochilishlari: scope, staggerlar, easinglar va reduced-motion kelishuvi.

Did freymvorki

Animatsiya — bu taom emas, ziravor. Har bir saytda men uch qoidaga amal qilaman:

  • Faqat transform va opacity. top, left, width, height hech qachon animatsiya qilinmaydi — ular har kadrda layoutni ishga tushiradi.
  • Har bo’limga bitta ochilish patterni. stagger: 0.1 bilan y: 20 → 0 fade-up hunarmandchilikdek ko’rinadi; besh xil ochilish tartibsizlikdek ko’rinadi.
  • prefers-reduced-motionga hurmat. Muzokaraga kirmaydi.

Reactda scoped va tozalanadigan 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 selektor scopelash va avtomatik tozalashni beradi — yo’l o’zgarganda oqib qolgan ScrollTriggerlar yo’q.

Insoniy seziladigan easinglar

Ease Tuyg’usi
power3.out ishonchli yetib kelish
back.out(1.5) o’yinchan sakrash
elastic.out(1, 0.5) saytga maksimal bir marta

Elastik sakrash — bu ziravor idishi, sous shishasi emas.

Darsliklar