태그: Animation
4편
-
Astro View Transitions 심화 가이드 — 부드러운 페이지 전환과 MPA UX
Astro ClientRouter와 View Transitions API로 전환을 설계하는 방법. transition:name·animate·persist, 커스텀 애니메이션, 폴백·성능·라이프사이클 이벤트와 프로덕션 네비게이션 패턴을 정리합니다.
-
Rive로 인터랙티브 애니메이션 만들기: 상태 머신, 웹·React·Flutter 통합, 런타임 API
Rive 상태 머신으로 인터랙션을 설계하고 웹·React·Flutter에 통합하는 방법을 정리합니다. 상태 머신 입력에서 데이터 바인딩(View Model)으로 바뀐 권장 방식, 네이티브 런타임으로 교체된 Flutter 0.14의 새 API, 성능과 Lottie 비교까지 다룹니다.
-
Three.js로 3D 웹 만들기: Scene·Camera·Mesh, 조명, 카메라 컨트롤, 텍스처, React Three Fiber
Three.js로 3D 웹을 만드는 방법. 기본 Scene·Camera·Renderer 설정, Geometry와 Material, 조명, 카메라 컨트롤, 텍스처, 애니메이션, React Three Fiber를 예제로 정리합니다.
-
Framer Motion으로 React 애니메이션: Variants, 제스처, 레이아웃 애니메이션, 스크롤
motion 컴포넌트의 기본 사용법, Variants로 부모와 자식 애니메이션을 조율하는 방법, hover·tap·drag 제스처를 예제로 설명합니다. layout 속성과 AnimatePresence로 만드는 레이아웃·퇴장 애니메이션, useScroll과 useInView를 이용한 스크롤 연동도 다룹니다.