Stagger List — Free HTML CSS JS Animation Snippet

A stagger list animates list items into view one by one with increasing delays — each item slides in from the left slightly after the previous one, the same stagger used by the reveal on scroll. Used on feature lists, team member grids, and anywhere a vertical list needs more visual energy than a static display.

The replay function

replay() first removes .show from all items simultaneously. After a brief 50ms pause (allowing the CSS to apply the hidden state), it loops through each item with setTimeout((li, i) => li.classList.add('show'), i * 80). The 80ms delay multiplied by the item index creates the stagger — item 0 appears at 0ms, item 1 at 80ms, item 2 at 160ms, etc.

The CSS reveal transition

Items start at opacity: 0; transform: translateX(-16px) — invisible and shifted 16px to the left. Adding .show transitions to opacity: 1; transform: translateX(0) via transition: opacity 0.35s ease, transform 0.35s ease. The 35ms transition fills the gap between item appearances, creating a smooth flow.

Combining with IntersectionObserver

Replace the replay button with an IntersectionObserver that triggers replay() when the list scrolls into view. Items reveal sequentially on first scroll, then remain visible.

How CSS animation-delay creates the stagger

Each list item has animation-delay: calc(N * 0.07s) where N is the item index. Item 0 animates immediately, item 1 waits 70ms, item 2 waits 140ms, and so on. The keyframe itself is identical for every item — only the delay differs. This single CSS technique creates the stagger without any JavaScript, making it highly performant and easy to apply to any number of items.

The slide-in keyframe

Each item animates from opacity: 0, transform: translateX(-20px) to opacity: 1, transform: translateX(0). The translateX movement adds directionality to the reveal — items appear to slide in from the left. Change to translateY(20px) for a slide-up entrance, or scale(0.8) for a zoom-in. The 0.4s duration with ease-out timing gives a natural deceleration on landing.

Triggering on scroll

By default the animation fires on page load. To trigger when the list scrolls into view, add animation-play-state: paused to .item initially, then use IntersectionObserver to set animation-play-state: running when the list container enters the viewport. Call obs.disconnect() inside the callback so the animation only triggers once per page view.

Dynamic item count

When items are added dynamically, apply the .item class with the correct animation-delay computed from the new item index: item.style.animationDelay = (existingCount * 0.07) + 's'. The CSS animation runs once automatically when the class is first applied, so new items animate in on insertion without any additional JavaScript.

How CSS animation-delay creates the stagger

Each list item has animation-delay: calc(N * 0.07s) where N is the item index. Item 0 animates immediately, item 1 waits 70ms, item 2 waits 140ms, and so on. The keyframe itself is identical for every item — only the delay differs. This single CSS technique creates the stagger without any JavaScript, making it highly performant and easy to apply to any number of items.

The slide-in keyframe

Each item animates from opacity: 0, transform: translateX(-20px) to opacity: 1, transform: translateX(0). The translateX movement adds directionality to the reveal — items appear to slide in from the left. Change to translateY(20px) for a slide-up entrance, or scale(0.8) for a zoom-in. The 0.4s duration with ease-out timing gives a natural deceleration on landing.

Triggering on scroll

By default the animation fires on page load. To trigger when the list scrolls into view, add animation-play-state: paused to .item initially, then use IntersectionObserver to set animation-play-state: running when the list container enters the viewport. Call obs.disconnect() inside the callback so the animation only triggers once per page view.

Dynamic item count

When items are added dynamically, apply the .item class with the correct animation-delay computed from the new item index: item.style.animationDelay = (existingCount * 0.07) + 's'. The CSS animation runs once automatically when the class is first applied, so new items animate in on insertion without any additional JavaScript.