Animation timing

The timing utilities tune the fade animations: animate-delay-*, animate-duration-* and animate-ease-* set one element's delay, duration and curve, and stagger-* with stagger-delay-* delay siblings one after another so a row of cards cascades instead of appearing at once.

Quick referenceLink to this section

Delay, duration and easing for one element. The ease-* classes at the end are the matching curves for CSS transitions:

Stagger, applied to each sibling:

Basic usageLink to this section

Combine a fade with a delay and a duration. The fades default to one second with ease-out-cubic; the timing classes override one part each. Press Replay to compare:

import { useState } from 'react'
import { Button } from '@systhemaui/next'

export default function Demo() {
  const [run, setRun] = useState(0)

  return (
    <div className="flex w-full flex-col items-center gap-6">
      <div key={run} className="flex w-full flex-col gap-3 overflow-hidden">
        <Bar className="animate-fadeinleft">animate-fadeinleft</Bar>
        <Bar className="animate-fadeinleft animate-delay-300">animate-delay-300</Bar>
        <Bar className="animate-fadeinleft animate-delay-700">animate-delay-700</Bar>
        <Bar className="animate-fadeinleft animate-duration-300">animate-duration-300</Bar>
        <Bar className="animate-fadeinleft animate-ease-in-out-back">animate-ease-in-out-back</Bar>
      </div>
      <Button.button variant="secondary" onClick={() => setRun(run + 1)}>
        Replay
      </Button.button>
    </div>
  )
}

function Bar({ className, children }: { className: string; children: string }) {
  return (
    <div
      className={`rounded-md bg-(--color-foundations-primary-bg) px-4 py-2 text-small text-(--color-foundations-primary-text) ${className}`}
    >
      {children}
    </div>
  )
}

<p class="aos animate-fadeinup animate-delay-300 animate-duration-700">…</p>

Delays and durations use Tailwind's duration scale (0, 75, 100, 150, 200, 300, 500, 700 and 1000 ms; the bare animate-delay and animate-duration are 150ms), and both accept arbitrary values: animate-delay-[1.2s]. The animate-ease-* names are the curves on Easing and transitions.

StaggerLink to this section

stagger-<n> goes on every sibling, where n is how many items share a row. Each item gets a delay from its position in that row: the first none, the second one step, the third two steps, and the count starts over on the next row. One step is var(--tw-stagger-delay, 300ms); set it with stagger-delay-* on the items or, because the custom property inherits, once on their parent.

import { useState } from 'react'
import { Button } from '@systhemaui/next'

const items = ['Plan', 'Design', 'Build', 'Launch', 'Measure', 'Improve']

export default function Demo() {
  const [run, setRun] = useState(0)

  return (
    <div className="flex w-full flex-col items-center gap-6">
      <div key={run} className="grid w-full grid-cols-3 gap-3 stagger-delay-150">
        {items.map((item) => (
          <div
            key={item}
            className="aos animate-fadeinup stagger-3 flex h-24 items-center justify-center rounded-lg border border-(--color-foundations-surface-border) bg-(--color-foundations-surface-bg) color-heading"
          >
            {item}
          </div>
        ))}
      </div>
      <Button.button variant="secondary" onClick={() => setRun(run + 1)}>
        Replay
      </Button.button>
    </div>
  )
}

<div class="grid grid-cols-3 gap-3 stagger-delay-150">
  <div class="aos animate-fadeinup stagger-3">Plan</div>
  <div class="aos animate-fadeinup stagger-3">Design</div>
  <div class="aos animate-fadeinup stagger-3">Build</div>
  <!-- the next three start over at no delay -->
</div>

• stagger-1 to stagger-10 are generated; stagger alone is stagger-1, which means no delay.
• The delay comes from :nth-child, so the items must be siblings in one parent, and other children in that parent count too.
• Each item still reveals when it scrolls in. In a grid every row enters the viewport together, so the row cascades from left to right.

The Posts listing staggers its cards per grid column with the same --tw-stagger-delay custom property, using a shorter 120ms default, so one stagger-delay-* class retunes both.

Responsive and state variantsLink to this section

Every timing class takes breakpoint prefixes. Match the stagger count to the column count at each size:

<div class="aos animate-fadeinup stagger-1 md:stagger-2 lg:stagger-3">…</div>

With grid-cols-1 md:grid-cols-2 lg:grid-cols-3, that cascades the two-up rows on tablets and the three-up rows on desktops, and plays phone items one by one as they scroll in.

Reduced motionLink to this section

Under prefers-reduced-motion: reduce the fades snap to their end state, so delays, durations and stagger have nothing to time: content appears at once. See Accessibility utilities.

CustomizingLink to this section

The delay, duration and stagger-step scales reuse Tailwind's transition-duration scale, and the easing names come from the Systhema easing table, which a project's easings token collection can override curve by curve (see Motion tokens and the motion reference). For a value outside the scales, use an arbitrary value (animate-duration-[1.6s], stagger-delay-[90ms]).

RelatedLink to this section

• Animation
• Easing and transitions
• Motion