목록 아이템 확장 트랜지션

목록의 아이템을 클릭/터치하면 해당 아이템의 상세 정보를 확장 트랜지션으로 보여준다.

엑스칼리버: 제타착용 레벨 135아이템 레벨 135

아이템 레벨 135

추가 능력치

• 힘+41
• 활력+48

이지스: 제타착용 레벨 135아이템 레벨 135

아이템 레벨 135

추가 능력치

• 힘+16
• 활력+19

롱기누스: 제타착용 레벨 135아이템 레벨 135

아이템 레벨 135

추가 능력치

• 힘+57
• 활력+67

이런 류의 효과를 구현할 때 매우 손이 많이 가는 편인데, motion(구 framer-motion)을 사용하여 비교적 간편하게 구현할 수 있다.

참고로 motion의 일부 내부 구현 원리를 다룬 Inside Framer’s Magic Motion 문서가 아주 일품이다. 일을 하면서 비슷한 문제를 해결해야 되는 경우가 있었는데, 그 때 나의 결과물에 비하면 추상화나 문서 수준이 너무 좋다.

참고

• Framer Motion
• Animation on the Web by Emil Kowalski