Avatar Stack Fan Expand — Hover Group Animation Snippet

<div class="fe-stage">
  <p class="fe-hint">Hover any avatar — the whole stack fans apart around it</p>
  <div class="fe-stack" id="feStack"></div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #f8fafc; display: flex; align-items: center; justify-content: center; min-height: 100vh; }

.fe-stage { display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 24px; }
.fe-hint { font-size: 13px; color: #64748b; text-align: center; max-width: 320px; }

.fe-stack { display: flex; padding: 10px 0; }

.fe-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 3px solid #fff;
  margin-left: -16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; color: #fff;
  box-shadow: 0 2px 8px rgba(15,23,42,0.15);
  cursor: pointer;
  position: relative;
  will-change: transform;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), z-index 0s, margin-left 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fe-stack .fe-avatar:first-child { margin-left: 0; }

// Hovering one avatar doesn't just lift itself — every OTHER avatar in the
// stack physically slides away from it, proportional to how close it sits in
// the stack order, so the whole row visibly "fans open" around the hovered
// member instead of only reacting locally.
var PEOPLE = [
  { initials: 'AC', c: '#6366f1' },
  { initials: 'MR', c: '#16a34a' },
  { initials: 'PS', c: '#d97706' },
  { initials: 'DA', c: '#dc2626' },
  { initials: 'SM', c: '#7c3aed' },
  { initials: 'LO', c: '#0891b2' },
  { initials: 'KT', c: '#db2777' },
];

var stack = document.getElementById('feStack');
var SPREAD = 20; // px each step of distance pushes a neighbor further out

PEOPLE.forEach(function (p, i) {
  var el = document.createElement('div');
  el.className = 'fe-avatar';
  el.style.background = p.c;
  el.style.zIndex = String(PEOPLE.length - i);
  el.textContent = p.initials;
  el.dataset.index = String(i);
  stack.appendChild(el);
});

var avatars = Array.prototype.slice.call(stack.querySelectorAll('.fe-avatar'));

avatars.forEach(function (el, i) {
  el.addEventListener('mouseenter', function () {
    el.style.zIndex = String(PEOPLE.length + 1);
    avatars.forEach(function (other, j) {
      if (j === i) {
        other.style.transform = 'translateY(-10px) scale(1.12)';
        return;
      }
      var delta = j - i; // negative = to the left, positive = to the right
      var dir = delta < 0 ? -1 : 1;
      var offset = dir * SPREAD * (1 + (Math.abs(delta) - 1) * 0.4);
      other.style.transform = 'translateX(' + offset.toFixed(1) + 'px)';
    });
  });

  el.addEventListener('mouseleave', function () {
    el.style.zIndex = String(PEOPLE.length - i);
    avatars.forEach(function (other) {
      other.style.transform = 'translateX(0) translateY(0) scale(1)';
    });
  });
});