✅ 1. 로딩/진입 시
- 페이드 인 / 슬라이드 인: 컴포넌트가 순차적으로 나타나도록 하면 부드럽고 전문적인 느낌.
- 로딩 스피너 / Progress Bar: 데이터 불러오는 동안 사용자 이탈을 방지.
✅ 2. 전환 / 네비게이션
- 페이지 전환 시 슬라이드: 모바일 앱 같은 느낌을 주기 위해 좌우 슬라이딩 전환.
- 탭/모달 등장 시 스케일 업 + 페이드 인: 자연스러운 전환.
✅ 3. 스크롤 기반 애니메이션
- 스크롤 트리거로 요소 등장 (Scroll Reveal): 스크롤할 때 콘텐츠가 천천히 나타나서 집중 유도.
- 패럴랙스(Parallax) 효과: 시각적으로 깊이감을 줌.
✅ 4. 상태 변화 애니메이션
- 토글 UI (예: 드롭다운, 아코디언): 부드러운 높이 변화와 아이콘 회전.
- 성공/실패 메시지 애니메이션: 색상 + 슬라이드 업 등으로 강조.
https://examples.motion.dev/react
https://animista.net/