Showcase · 5s loop

Card Fan Out

Five cards fan from a shared pivot like a dealt hand, then collapse back

By Lottie Max Added Jun 12, 2026

540×400 · 30fps · 5.00s · loops

Inspiration

The flick of a card dealer's fan — the satisfying physical motion when a stack of cards becomes a hand. Each card moves independently but they all pivot from the same point at the wrist, which is what makes the fan read as one motion rather than five.

How it was made

Five cards stacked at a shared pivot anchored at the bottom-centre. Each card is a group rotating from 0° to its final angle (-40° to +40° in 20° steps). The outer cards lead the fan-out slightly (0.05s offsets per card) so the spread reads as staggered rather than rigid. On collapse the order reverses so the outer cards come back last. Inside each card group: a coloured icon dot + three content lines suggest a real card without committing to specific imagery.

Embed it anywhere

Paste the snippet into any HTML page. The animation loads from /templates/card-fan-out.json — host it yourself or hot-link from lottiemax.com.

Embed · Card Fan Out

<script src="https://unpkg.com/lottie-web@latest/build/player/lottie.min.js"></script>
<div id="lottie-card-fan-out" style="width:540px;height:400px;"></div>
<script>
  lottie.loadAnimation({
    container: document.getElementById('lottie-card-fan-out'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: 'https://lottiemax.com/templates/card-fan-out.json',
  });
</script>