Motion

Stagger Fade In

A looping motion where items rise and fade in sequence

#motion
#stagger
#fade
#loop

Install

This item can't be installed yet. Use the source as a reference. Why some items can't be installed

AI prompt

Animate a list with a looping CSS keyframe (opacity 0→1, translateY 16px→0) and animation-delay: calc(var(--i) * 120ms). Respect prefers-reduced-motion.

Source

View as Markdown

demo.module.csscss

.stage {
  min-height: 100vh;
  display: grid;
  place-content: center;
  gap: 12px;
  padding: 24px;
}

.item {
  width: min(360px, 80vw);
  padding: 16px;
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-surface);
  animation: loop 3000ms var(--ds-ease-out) infinite both;
  animation-delay: calc(var(--i) * 120ms);
}

@keyframes loop {
  0% {
    opacity: 0;
    transform: translateY(16px);
  }
  20%,
  70% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: translateY(-8px);
  }
}

demo.tsxtsx

import type { CSSProperties } from "react";
import styles from "./demo.module.css";

const LABELS = ["Design", "Motion", "Shader", "Theme", "Ship"];

export default function Demo() {
  return (
    <div className={styles.stage}>
      {LABELS.map((label, index) => (
        <div key={label} data-testid="stagger-item" className={styles.item} style={{ "--i": index } as CSSProperties}>
          {label}
        </div>
      ))}
    </div>
  );
}