Learnings

// First: measure the starting position before changing the layout
const first = el.getBoundingClientRect();

// Last: apply the CSS class that establishes the final position
el.classList.add("세상-끝의-라멘");
const last = el.getBoundingClientRect(); // Measuring immediately after the change may trigger synchronous layout

// Invert: calculate the offset from the final position back to the start
const invert = first.top - last.top;

// Play: make it appear at the starting position with the first keyframe, then remove the offset
// The layout is already final; only transform changes during playback
const player = el.animate(
  [
    { transform: `translateY(${invert}px)` },
    { transform: "translateY(0)" },
  ],
  {
    duration: 300,
    easing: "cubic-bezier(0,0,0.32,1)",
  },
);