wow-design-wiki/motion/staggered-reveal.md

name, title, description, tags, source

name	title	description	tags	source
motion/staggered-reveal	Staggered Element Reveal	Cascading entrance animations where elements appear sequentially. Used on Linear, Raycast, Linear.app hero sections.	motion gsap scrolltrigger entrance stagger	linear.app, raycast.com, godly.website top 50

Staggered Element Reveal

Что это

Последовательное появление элементов с нарастающей задержкой. Создаёт ощущение "потока" и профессионализма. Элементы появляются не все сразу, а каскадом с интервалом.

Где используется

• Hero-секции Linear, Raycast, Resend
• Feature-блоки с иконками
• Списки преимуществ
• Карточки с услугами

Ключевые параметры

Параметр	Значение	Почему
stagger	0.08–0.12	Оптимальный ритм — не слишком быстро, не медленно
duration	0.6–0.8s	Достаточное время для заметности
ease	power3.out	Плавное замедление, ощущение "приземления"
delay	0.2–0.3	Задержка перед началом каскада
from opacity	0.8	Не полная прозрачность, чтобы не было "прыжка"
from translateY	20–30px	Элементы "влетают" снизу

Референсы

Linear Hero

1. Logo появляется → 0.3s задержка
2. H1 появляется (line by line) → stagger 0.1s
3. Подзаголовок → 0.4s задержка
4. CTA кнопка → 0.6s задержка
5. Декоративные элементы → 0.8s задержка

Resend Feature Grid

- Карточки появляются с задержкой 0.08s друг за другом
- Каждая карточка: fade + slide up 15px
- Hover на карточку: scale 1.02 + shadow

Реализация

// GSAP + ScrollTrigger
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

// 1. Базовый stagger-ревеал
gsap.from('.stagger-item', {
  opacity: 0,
  y: 30,
  duration: 0.7,
  stagger: 0.08,
  ease: 'power3.out',
  delay: 0.3,
  scrollTrigger: {
    trigger: '.stagger-section',
    start: 'top 80%',
    toggleActions: 'play none none none'
  }
});

// 2. Stagger для карточек
gsap.from('.feature-card', {
  opacity: 0,
  y: 25,
  scale: 0.97,
  duration: 0.6,
  stagger: 0.06,
  ease: 'power2.out',
  scrollTrigger: {
    trigger: '.features-grid',
    start: 'top 85%'
  }
});

// 3. Stagger для текстовых строк
gsap.from('.hero-line', {
  opacity: 0,
  y: 40,
  duration: 0.8,
  stagger: 0.12,
  ease: 'power3.out',
  delay: 0.2
});

// 4. Line-by-line reveal для заголовка
const lines = document.querySelectorAll('.hero h1 .line');
gsap.from(lines, {
  opacity: 0,
  y: 50,
  rotateX: -15,
  duration: 0.8,
  stagger: 0.15,
  ease: 'power3.out',
  delay: 0.3
});

CSS подготовка

.stagger-item {
  /* Начальное состояние до анимации */
  opacity: 0;
  transform: translateY(30px);
  will-change: opacity, transform;
}

/* Альтернатива: CSS-only для простых случаев */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(25px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stagger-item {
  opacity: 0;
  animation: fadeUp 0.6s ease forwards;
}

.stagger-item:nth-child(1) { animation-delay: 0.1s; }
.stagger-item:nth-child(2) { animation-delay: 0.18s; }
.stagger-item:nth-child(3) { animation-delay: 0.26s; }
.stagger-item:nth-child(4) { animation-delay: 0.34s; }
.stagger-item:nth-child(5) { animation-delay: 0.42s; }
.stagger-item:nth-child(6) { animation-delay: 0.5s; }

Anti-patterns (Чего НЕ делать)

❌ Плохо	✅ Хорошо
stagger: 0.02 — слишком быстро, "мигание"	stagger: 0.08 — чёткий ритм
stagger: 0.3 — слишком медленно, скучно	stagger: 0.06–0.12 — оптимально
Все элементы opacity: 0 → 1	opacity: 0.8 → 1 + y: 20 → 0
Без will-change	will-change: opacity, transform
Без stagger (все сразу)	Каскадное появление

Performance

// ✅ GPU accelerated
gsap.from('.item', { opacity: 0, y: 20, transform: 'translateY(20px)' });

// ❌ Bad — заставляет layout
gsap.from('.item', { marginLeft: '20px' });
gsap.from('.item', { top: '20px', left: '20px' });

Validation (CV Service)

# После рендеринга страницы
curl -s -X POST http://localhost:8001/design/analyze-dom \
  -H "Content-Type: application/json" \
  -d '{"html": "...", "full_analysis": false}' | python3 -m json.tool

Проверить:

• performance score > 8 — анимации только на transform и opacity
• ux_heuristics score > 6 — анимации не мешают навигации
• wcag_compliance — анимация имеет prefers-reduced-motion фоллбэк

@media (prefers-reduced-motion: reduce) {
  .stagger-item {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}