entrance-patterns

الگوهای استاندارد برای ورود نرم عناصر، نمایش تدریجی فهرست‌ها و انیمیشن‌های reveal

این Skill الگوهای ورود عناصر به صفحه را با تکیه بر اصول Material Design 3 ارائه می‌کند؛ از fade-in و slide-up تا scale-in و انیمیشن‌های ترکیبی. منحنی emphasized-decelerate و مدت‌زمان متناسب با اندازه‌ی عنصر، حرکت‌ها را طبیعی و منسجم می‌کند.

برای فهرست‌ها و شبکه‌ها، الگوهای stagger بر اساس تعداد آیتم‌ها، جهت خواندن و نقطه‌ی آغاز منطقی پیشنهاد می‌دهد. همچنین با ارائه‌ی جایگزین prefers-reduced-motion به ساخت تجربه‌ای دسترس‌پذیر و حرفه‌ای کمک می‌کند.

چه چیزی می‌گیرید

• الگوهای آماده‌ی `fade-in`، `slide-up` و `scale-in` با CSS
• تنظیمات `stagger` برای فهرست‌ها و شبکه‌های چندآیتمی
• راهنمای انتخاب duration و easing بر اساس اندازه و تعداد عناصر
• الگوهای ورود از مبدأ و ترتیب خواندن محتوا
• پشتیبانی از حالت `prefers-reduced-motion`

برای چه کاری خوب است

• توسعه‌دهندگان رابط کاربری که با CSS یا Framer Motion انیمیشن ورود می‌سازند
• طراحی فهرست‌ها، کارت‌ها و داشبوردهایی که باید به‌صورت تدریجی نمایش داده شوند
• پروژه‌هایی که به موشن منسجم، سریع و سازگار با دسترس‌پذیری نیاز دارند

برای چه کاری نیست

• انیمیشن‌های پیچیده‌ی تعاملی، شبیه‌سازی فیزیک یا timelineهای چندمرحله‌ای
• ساخت ویدیو، موشن گرافیک یا انیمیشن‌های طولانی خارج از رابط کاربری
• صفحه‌هایی که به‌دلیل عملکرد یا الزامات محصول نباید از انیمیشن ورود استفاده کنند

دربارهٔ این اسکیل

Entrance Patterns

Patterns for elements entering the viewport.

Core Principle

Elements entering should use:

• Easing: emphasized-decelerate (0.05, 0.7, 0.1, 1)
• Duration: Based on element size (short-3 to medium-2)

Basic Entrance

Fade In

.fade-in {
  animation: fadeIn 250ms cubic-bezier(0.05, 0.7, 0.1, 1) forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

Slide Up + Fade

.slide-up {
  animation: slideUp 250ms cubic-bezier(0.05, 0.7, 0.1, 1) forwards;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Scale + Fade

.scale-in {
  animation: scaleIn 250ms cubic-bezier(0.05, 0.7, 0.1, 1) forwards;
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

Stagger Patterns

Sequential Stagger

Elements enter one after another.

// Framer Motion
const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: {
      staggerChildren: 0.05 // 50ms between children
    }
  }
};

const item = {
  hidden: { opacity: 0, y: 16 },
  show: {
    opacity: 1,
    y: 0,
    transition: {
      duration: 0.25,
      ease: [0.05, 0.7, 0.1, 1]
    }
  }
};

Recommended Stagger Intervals

Best Practices

1. Cap total duration — Don't exceed 800ms for full list
2. Start fast — First items appear quickly
3. Reduce for many items — Tighter stagger for long lists
4. Direction matters — Stagger from logical origin

Direction-Based Entrances

From Origin

Elements enter from their creation point.

// Card created from FAB - entrance from FAB position
<motion.div
  initial={{ scale: 0, originX: 0.9, originY: 0.9 }}
  animate={{ scale: 1 }}
  transition={{ duration: 0.3, ease: [0.05, 0.7, 0.1, 1] }}
/>

Reading Order

For content, follow reading direction (LTR: left to right, top to bottom).

const staggerFromTopLeft = {
  staggerChildren: 0.05,
  staggerDirection: 1 // forward order
};

Reduced Motion Alternative

const getEntranceVariant = (prefersReducedMotion) => ({
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    y: prefersReducedMotion ? 0 : 16,
    transition: {
      duration: prefersReducedMotion ? 0.1 : 0.25
    }
  }
});

See references/stagger-patterns.md for advanced stagger techniques.

دانلود ZIP