حرکت باید چیزی را توضیح دهد

حرکت از رابطه می‌آید

ورود یک کارت، تغییر وضعیت یک کنترل یا جابه‌جایی محصول باید دربارهٔ ساختار صفحه اطلاعات بدهد. اگر با حذف انیمیشن، معنا و رابطهٔ عناصر کاملاً یکسان می‌ماند، احتمالاً آن حرکت تزئینی است.

در پروژهٔ کیمیا، حرکت محصول از روایت کالکشن و تغییر زاویهٔ دید می‌آید. سرعت و مکث‌ها تابع اندازهٔ شیء و مرحلهٔ داستان هستند، نه یک پیش‌تنظیم ثابت برای همهٔ بخش‌ها.

حرکت خوب دیده می‌شود، اما برای دیده‌شدن خودش وارد صفحه نمی‌شود.

سه سؤال قبل از ساخت

• کاربر بعد از این حرکت چه تغییری را باید بفهمد؟
• آیا متن و دعوت به اقدام بدون تمام‌شدن animation قابل استفاده‌اند؟
• در موبایل و کاهش‌یافته حرکت چه نسخهٔ ساده‌تری لازم است؟

توقف خارج محدودهٔ دید بخشی از طراحی است

انیمیشنی که دیده نمی‌شود همچنان می‌تواند پردازنده و باتری مصرف کند. ناظر تقاطع فقط یک بهینه‌سازی فنی نیست؛ مرز شروع و پایان تجربه را تعریف می‌کند.

const observer = new IntersectionObserver((entries) => {
  entries.forEach(({ isIntersecting, target }) => {
    if (isIntersecting) target.play?.();
    else target.pause?.();
  });
}, { threshold: 0.08 });