Saytdagi animatsiyalar: CSS yoki JavaScript, GSAP va Motion

Qisqa javob

• CSS transitions va keyframes — hover, fokus, menyuni ochish, elementlarning paydo bo‘lishi, cheksiz loaderlar uchun. Arzon, kutubxona talab qilmaydi va JavaScript yuklanishidan oldin ham ishlaydi.
• GSAP — murakkab taymlaynlar, ko‘plab elementlarni sinxronlash, bloklarni mahkamlab qo‘yadigan aylantirish animatsiyalari, SVG animatsiyasi uchun.
• Motion — React interfeyslari uchun: komponentlarning paydo bo‘lishi va yo‘qolishi, ro‘yxatdagi o‘rin almashishlar, imo-ishoralar, holatlar orasidagi o‘tishlar. Oddiy JavaScript uchun versiyasi ham bor.

Tanlash qoidasi oddiy: agar animatsiyani «hodisa bo‘yicha A holatdan B holatga» deb ta’riflash mumkin bo‘lsa, CSS ni oling. Zanjirlar, vaqtni boshqarish, aylantirishga bog‘lash yoki fizika kerak bo‘lsa — JavaScript kutubxonasini.

Qaysi xususiyatlarni animatsiyalash arzon

Brauzer kadrni bir necha bosqichda chizadi: layout (o‘lchamlarni hisoblash), paint (piksellarni chizish) va composite (qatlamlarni birlashtirish). Animatsiya qanchalik erta bosqichga ta’sir qilsa, shunchalik qimmat.

left o‘rniga transform: translateX(), width o‘rniga transform: scale() ishlating. Soyani arzon animatsiyalash uchun tayyor soyali psevdoelementning opacity sini o‘zgartiring.

will-change: transform brauzerga elementni alohida qatlamga chiqarishni maslahat beradi. Uni nuqtali va faqat haqiqatan animatsiyalanadigan elementlarga qo‘ying: ortiqcha qatlamlar xotirani sarflaydi.

CSS: qachon yetarli

.card {
  transition: transform 200ms ease, opacity 200ms ease;
}
.card:hover {
  transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card:hover { transform: none; }
}

Aylantirishga bog‘liq effektlar uchun zamonaviy brauzerlarda JavaScript siz ishlaydigan scroll-driven animations (animation-timeline: view()) paydo bo‘ldi. Qo‘llab-quvvatlash hali to‘liq emas, shuning uchun uni tekshiring va animatsiya ishlamaganda ham kontent ko‘rinib turishiga ishonch hosil qiling.

GSAP va Motion: aylantirishdagi animatsiyalar

Aylantirishda oddiy paydo bo‘lishni Intersection Observer va CSS klass orqali qilish mumkin. Agar seksiyani mahkamlash, aylantirish holatiga bog‘langan animatsiya yoki murakkab ketma-ketlik kerak bo‘lsa, kutubxona qulayroq.

ScrollTrigger plagini bilan GSAP, foydalanuvchi sozlamalarini hisobga olgan holda:

import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

const mm = gsap.matchMedia();
mm.add("(prefers-reduced-motion: no-preference)", () => {
  gsap.from(".feature", {
    y: 40,
    opacity: 0,
    stagger: 0.1,
    scrollTrigger: { trigger: ".features", start: "top 80%" }
  });
});

React da Motion:

import { motion, MotionConfig } from "motion/react";

<MotionConfig reducedMotion="user">
  <motion.div
    initial={{ opacity: 0, y: 24 }}
    whileInView={{ opacity: 1, y: 0 }}
    viewport={{ once: true }}
  />
</MotionConfig>

reducedMotion="user" tizimda harakatni kamaytirishni yoqqan foydalanuvchilar uchun transform animatsiyalarini o‘chiradi.

prefers-reduced-motion

Ba’zi odamlarda ekrandagi harakat bosh aylanishi va ko‘ngil aynishiga sabab bo‘ladi. prefers-reduced-motion media so‘rovi foydalanuvchi tizimdan animatsiyalarni kamaytirishni so‘raganini bildiradi. Nima qilish kerak:

• parallaks, katta siljishlar va avtomatik aylantirishni olib tashlash;
• shaffoflik va rangning qisqa o‘zgarishlarini qoldirish — ular odatda xalaqit bermaydi;
• animatsiyasiz kontent darhol ko‘rinishini va opacity: 0 da qotib qolmasligini kuzatish.

Qotishlardan qanday qochish kerak

• O‘lcham va chekinishlarni emas, transform va opacity ni animatsiyalang.
• O‘lchamlarni bitta siklda o‘qib-yozmang (offsetHeight, keyin uslubni yozish, keyin yana o‘qish) — bu layout ni majburiy qayta hisoblashga olib keladi.
• JavaScript animatsiyalarini setInterval emas, requestAnimationFrame yoki kutubxona orqali bajaring.
• scroll hodisasiga og‘ir mantiqni osmang.
• Kuchsiz telefonda va DevTools dagi Performance panelida CPU sekinlashtirilgan holda tekshiring.
• Hamma narsani animatsiyalamang: bitta ifodali animatsiya o‘nta maydasidan yaxshiroq.