ShadcnUI.Components.Motion.Stagger (shadcn_ui v1.0.0)

Copy Markdown View Source

Complete keyed caller content with optional bounded render-time presentation.

Requires a stable id and keyed item slots. as: :div (default) renders ordinary div wrappers, not an inferred list; :ul / :ol use native li items. Item slots accept class and unrelated rest globals and preserve trusted HEEx links/forms in document order. No content is cloned.

Effect defaults to :none, with opt-in :fade / :rise. Preset :quick uses 150ms duration and 50ms intervals; :default uses 250ms and 75ms. Only items whose delay plus duration fits in 1000ms animate; excess items immediately retain their baseline. Content starts visible (never opacity zero), focus cancels the effect, and removing styles restores fully visible content.

Motion :none, ancestor data-shadcn-motion="reduce" and OS reduced motion override effects. Finite work may finish offscreen. There is no observer, viewport-enter trigger, persistent replay tracking or animation-once guarantee. Rendering/replacement or removing and restoring suppression can replay CSS; callers own patch boundaries, native form values and any restoration.

Summary

Functions

Renders visible ordered slot content with an optional finite entrance effect.

Functions

stagger(assigns)

Renders visible ordered slot content with an optional finite entrance effect.

Attributes

  • id (:string) (required)
  • as (:atom) - Defaults to :div. Must be one of :div, :ul, or :ol.
  • effect (:atom) - Defaults to :none. Must be one of :none, :fade, or :rise.
  • preset (:atom) - Defaults to :default. Must be one of :quick, or :default.
  • motion (:atom) - Defaults to :system. Must be one of :system, or :none.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • item (required) - Accepts attributes:
    • key (:string) (required)
    • class (:any)
    • rest (:map)