FLIP List Reorder Animation — Smoothly Animating a Sort with First-Last-Invert-Play

<div class="demo">
  <div class="flip-controls">
    <button class="flip-btn" id="sortNameBtn">Sort by name</button>
    <button class="flip-btn" id="sortScoreBtn">Sort by score</button>
    <button class="flip-btn" id="shuffleBtn">Shuffle</button>
  </div>
  <ul class="flip-list" id="flipList">
    <li class="flip-item" data-id="mira"><span class="flip-name">Mira Solano</span><span class="flip-score">92</span></li>
    <li class="flip-item" data-id="devon"><span class="flip-name">Devon Ashworth</span><span class="flip-score">78</span></li>
    <li class="flip-item" data-id="lena"><span class="flip-name">Lena Okafor</span><span class="flip-score">95</span></li>
    <li class="flip-item" data-id="priya"><span class="flip-name">Priya Nair</span><span class="flip-score">64</span></li>
    <li class="flip-item" data-id="theo"><span class="flip-name">Theo Bergstrom</span><span class="flip-score">88</span></li>
  </ul>
</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; padding: 24px; }
.demo { width: 340px; max-width: 100%; display: flex; flex-direction: column; gap: 14px; }

.flip-controls { display: flex; gap: 8px; }
.flip-btn { flex: 1; background: #fff; border: 1.5px solid #e2e8f0; padding: 8px; border-radius: 9px; font-size: 12px; font-weight: 700; color: #475569; cursor: pointer; font-family: inherit; }
.flip-btn:hover { background: #f1f5f9; }

.flip-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.flip-item { display: flex; align-items: center; justify-content: space-between; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px 14px; will-change: transform; }
.flip-name { font-size: 13px; font-weight: 700; color: #111827; }
.flip-score { font-size: 12.5px; font-weight: 800; color: #6366f1; background: #eef2ff; padding: 3px 9px; border-radius: 999px; }

const list = document.getElementById('flipList');

function getItems() {
  return Array.from(list.querySelectorAll('.flip-item'));
}

// --- FLIP: First, Last, Invert, Play ---
function flipReorder(reorderFn) {
  const items = getItems();

  // FIRST: record every item's current position before anything changes.
  const first = new Map();
  items.forEach((el) => first.set(el, el.getBoundingClientRect()));

  // Actually reorder the DOM (the "expensive", layout-triggering part).
  reorderFn(items);

  // LAST: record where each item ended up after the DOM reorder.
  items.forEach((el) => {
    const last = el.getBoundingClientRect();
    const firstRect = first.get(el);
    const deltaX = firstRect.left - last.left;
    const deltaY = firstRect.top - last.top;

    if (deltaX === 0 && deltaY === 0) return;

    // INVERT: immediately jump the element back to its old position visually,
    // using a transform (cheap, no layout) so the reorder appears not to have
    // happened yet.
    el.style.transition = 'none';
    el.style.transform = `translate(${deltaX}px, ${deltaY}px)`;

    // Force the browser to apply the above styles before we change them again,
    // otherwise the transition below would be skipped entirely.
    el.getBoundingClientRect();

    // PLAY: animate from the inverted (old) position back to transform: none,
    // i.e. its real new position — this is the only part that actually looks
    // like an animation, and it's cheap because it only animates a transform.
    el.style.transition = 'transform 0.35s cubic-bezier(.2,.8,.2,1)';
    el.style.transform = '';
  });
}

function sortByName(items) {
  const sorted = [...items].sort((a, b) => a.querySelector('.flip-name').textContent.localeCompare(b.querySelector('.flip-name').textContent));
  sorted.forEach((el) => list.appendChild(el));
}

function sortByScore(items) {
  const sorted = [...items].sort((a, b) => Number(b.querySelector('.flip-score').textContent) - Number(a.querySelector('.flip-score').textContent));
  sorted.forEach((el) => list.appendChild(el));
}

function shuffle(items) {
  const shuffled = [...items].sort(() => Math.random() - 0.5);
  shuffled.forEach((el) => list.appendChild(el));
}

document.getElementById('sortNameBtn').addEventListener('click', () => flipReorder(sortByName));
document.getElementById('sortScoreBtn').addEventListener('click', () => flipReorder(sortByScore));
document.getElementById('shuffleBtn').addEventListener('click', () => flipReorder(shuffle));