오깨들

// First: 레이아웃을 바꾸기 전에 시작 위치를 측정
const first = el.getBoundingClientRect();

// Last: 최종 위치를 만드는 CSS 클래스를 적용
el.classList.add("세상-끝의-라멘");
const last = el.getBoundingClientRect(); // 변경 직후 측정하면 동기 레이아웃 계산이 발생 가능

// Invert: 최종 위치에서 시작 위치로 돌아갈 만큼의 차이를 계산
const invert = first.top - last.top;

// Play: 첫 키프레임으로 시작 위치처럼 보이게 하여 이동량을 없앰
// 실제 레이아웃은 이미 최종 상태이며, 재생 중에는 transform만 변경
const player = el.animate(
  [
    { transform: `translateY(${invert}px)` },
    { transform: "translateY(0)" },
  ],
  {
    duration: 300,
    easing: "cubic-bezier(0,0,0.32,1)",
  },
);