✅ 1. 로딩/진입 시

• 페이드 인 / 슬라이드 인: 컴포넌트가 순차적으로 나타나도록 하면 부드럽고 전문적인 느낌.
• 로딩 스피너 / Progress Bar: 데이터 불러오는 동안 사용자 이탈을 방지.

✅ 2. 전환 / 네비게이션

• 페이지 전환 시 슬라이드: 모바일 앱 같은 느낌을 주기 위해 좌우 슬라이딩 전환.
• 탭/모달 등장 시 스케일 업 + 페이드 인: 자연스러운 전환.

✅ 3. 스크롤 기반 애니메이션

• 스크롤 트리거로 요소 등장 (Scroll Reveal): 스크롤할 때 콘텐츠가 천천히 나타나서 집중 유도.
• 패럴랙스(Parallax) 효과: 시각적으로 깊이감을 줌.

✅ 4. 상태 변화 애니메이션

• 토글 UI (예: 드롭다운, 아코디언): 부드러운 높이 변화와 아이콘 회전.
• 성공/실패 메시지 애니메이션: 색상 + 슬라이드 업 등으로 강조.

https://examples.motion.dev/react

https://animista.net/