Stagger a list Pro

A stagger plays the same animation on each item of a list, each one starting a little later than the one before. It makes a menu or a list of results read as one movement instead of a block appearing at once.

using Cascade;
using System.Linq;

var items = listRoot.Query<VisualElement>(className: "row").ToList();

items.AnimateEach()
     .SlideIn(Edge.Right, 0.35f).Ease(Ease.OutCubic)
     .Fade(1f, 0.35f).From(0f)
     .Stagger(0.06f);              // item i starts i × 0.06 s after the first

AnimateEach() works on any list of VisualElements, so the result of a UQuery works directly.

Write From(0f) on the fade. Each item starts from its own value when its turn comes, and an item that is already visible has nothing to fade. From also hides the later items right away, so they don't flash before their turn.

Choosing the step

  • 0.04–0.08 s per item works for most menus and lists.
  • Above about 0.1 s a long list starts to feel slow.
  • The whole group takes duration + (count − 1) × step, so it grows with the list.

For lists whose length changes, fix the total time instead of the step:

// spread the whole list over 0.4 s, but never more than 0.06 s between items
float step = Stagger.StepForSpan(items.Count, 0.4f, 0.06f);
items.AnimateEach().Fade(1f, 0.3f).From(0f).Stagger(step);

Start something after the list

float total = Stagger.TotalDuration(items.Count, 0.35f, 0.06f);
footer.Animate().Fade(1f, 0.25f).From(0f).Delay(total);

Replaying the list

When the list is shown again, stop what is still running on the items first, so a quick re-open starts cleanly:

foreach (var item in items) item.StopAnimations();
items.AnimateEach().SlideIn(Edge.Right, 0.35f).Ease(Ease.OutCubic).Fade(1f, 0.35f).From(0f).Stagger(0.06f);

Staggering with Cascade Lite

Lite has no AnimateEach, but it has Delay. A loop gives the same result for a short list:

for (int i = 0; i < items.Count; i++)
{
    items[i].Animate()
        .Fade(1f, 0.3f).From(0f).Delay(i * 0.06f)
        .SlideIn(Edge.Right, 0.3f).Ease(Ease.OutCubic).Delay(i * 0.06f);
}

Pro's AnimateEach adds the timing helpers above, works with springs, and handles replays and cancelling for the whole group.

Get Cascade Pro Get Cascade Lite (free)