Orchestration

Sequencing animations together perfectly brings satisfaction and joy.

This can be achieved in pure CSS.

import "./styles.css";
 
export default function Orchestration() {
  return (
    <div className="orchestration">
      <h1>Jon Doe</h1>
      {COPY.map((copy, index) => (
        <p key={copy} style={{ "--stagger": index}}>{copy}</p>
      ))}
    </div>
  );
}
 
const COPY = [
  ...
]

.orchestration {
  padding: 24px 0;
}
 
.orchestration > * {
  animation: enter 0.6s ease both;
  animation-delay: calc(var(--delay) * var(--stagger));
  --delay: 120ms;
  margin: 28px 64px;
}
 
@keyframes enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}