pmndrs/react-spring

개요 스프링 물리학 기반의 React 애니메이션 라이브러리다. 29,000+ stars를 보유한 React 애니메이션 분야의 대표적인 라이브러리로, CSS 트랜지션과 달리 자연스러운 물리 기반 모션을 구현한다.

핵심 내용 스프링 물리 파라미터(tension, friction, mass)로 애니메이션의 느낌을 세밀하게 조정할 수 있다. React DOM, React Native, @react-three/fiber 등 다양한 렌더러를 지원한다. 애니메이션 값을 직접 DOM에 적용해 React 렌더 사이클 없이 60fps 성능을 낸다.

기존 대비 차별점 CSS 트랜지션은 고정된 duration/easing 방식이지만, react-spring은 스프링 물리로 더 자연스럽고 인터럽트 가능한 애니메이션을 만든다. Framer Motion과 달리 React DOM, React Native, Three.js를 동일한 API로 애니메이션할 수 있다.

활용 가능성 UI 트랜지션, 드래그 인터랙션, 3D 씬 애니메이션, 모바일 앱 모션 등 React 생태계 전반의 애니메이션에 활용할 수 있다. use-gesture와 함께 사용하면 물리 기반 인터랙티브 UI를 구현할 수 있다.

참고 자료 - 원본