pmndrs/react-spring

어떤 프로젝트인가요?

핵심 기능

• 01중단하거나 목표를 바꿔도 부드럽게 유지되는 스프링 기반 애니메이션입니다.
• 02@react-spring/web으로 React DOM을, @react-spring/three로 react-three-fiber를 지원합니다.
• 03useSpring 같은 선언형 훅을 제공하며 필요에 따라 명령형으로 제어할 수 있습니다.
• 04이징 곡선을 적용한 재생 시간 기반 애니메이션도 지원합니다.
• 05TypeScript로 작성되었으며 npm에 배포됩니다.

활용 사례

• React 컴포넌트에 스크롤 진입 또는 페이드인 전환 효과를 추가합니다.
• 토글, 확장, 드래그 동작 같은 UI 상태 변화를 애니메이션합니다.
• react-three-fiber 씬의 3D 객체에 애니메이션을 적용합니다.

빠른 시작

1. 1

   웹 타깃을 설치합니다

   npm install @react-spring/web
2. 2

   animated와 useSpring을 가져오고 요소를 animated.div로 감쌉니다

토픽

자주 묻는 질문

react-spring은(는) 무엇인가요?

DOM 및 react-three-fiber 요소를 선언형 또는 명령형으로 애니메이션하는, 스프링 물리 기반 React 애니메이션 라이브러리입니다. react-spring은 고정된 재생 시간 대신 스프링 물리를 기반으로 하는 React 애니메이션 라이브러리입니다. 컴포넌트 스타일의 목표 값을 지정하면, 라이브러리가 현재 값에서 목표 값을 향해 스프링 방식으로 애니메이션을 적용하므로 애니메이션이 진행되는 도중 중단하거나 목표를 바꿔도 움직임이 부드럽게 유지됩니다. 고정된 타이밍을 선호하는 경우에는 이징 곡선을 적용한 재생 시간 기반 애니메이션도 사용할 수 있습니다.

react-spring은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

react-spring은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

react-spring은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. react-spring의 마지막 커밋은 2026년 11월 1일입니다.

react-spring은(는) 어디에 사용할 수 있나요?

React 컴포넌트에 스크롤 진입 또는 페이드인 전환 효과를 추가합니다. 토글, 확장, 드래그 동작 같은 UI 상태 변화를 애니메이션합니다. react-three-fiber 씬의 3D 객체에 애니메이션을 적용합니다.

react-spring는 어떻게 설치하나요?

웹 타깃을 설치합니다: npm install @react-spring/web animated와 useSpring을 가져오고 요소를 animated.div로 감쌉니다

react-spring은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/pmndrs/react-spring