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