Skip to content
LSD Framework
Components
LSD primitive

Animated List

A list that animates each item in sequence with a delay. Used to showcase notifications or events on your landing page.

LSD FX: lsd-fx--stagger-children ↩ All components
01 · live

Pattern

Animated List

A list that animates each item in sequence with a delay. Used to showcase notifications or events on your landing page.

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five
View generated HTML
<h2 class="im-heading">Animated List</h2>
<p class="im-text">A list that animates each item in sequence with a delay. Used to showcase notifications or events on your landing page.</p>
<ul class="lsd-fx--stagger-children" role="log" aria-live="polite" aria-relevant="additions" aria-label="Animated list" style="display: flex; flex-wrap: wrap; gap: 12px; list-style: none; padding: 0;">
  <li><span class="lsd-chip">Item one</span></li>
  <li><span class="lsd-chip lsd-chip--ghost">Item two</span></li>
  <li><span class="lsd-chip">Item three</span></li>
  <li><span class="lsd-chip lsd-chip--ghost">Item four</span></li>
  <li><span class="lsd-chip">Item five</span></li>
</ul>
LSD components · Animated List
↩ All components