react-spring README

The project's README from github.com/pmndrs/react-spring. As one markdown file: README.md.


react-spring

A spring-physics first animation library
giving you flexible tools to confidently cast your ideas


Chat on Discord


react-spring is a cross-platform spring-physics first animation library.

It's as simple as:

const styles = useSpring({
  from: {
    opacity: 0
  },
  to: {
    opacity: 1
  }
})

<animated.div style={styles} />

Just a small bit about us:

There's a lot more to be had! Give it a try and find out.

Getting Started

⚡️ Jump Start

# Install the target you need
npm install @react-spring/web
# or, for react-three-fiber
npm install @react-spring/three

import { animated, useSpring } from '@react-spring/web'

const FadeIn = ({ isVisible, children }) => {
  const styles = useSpring({
    opacity: isVisible ? 1 : 0,
    y: isVisible ? 0 : 24,
  })

  return <animated.div style={styles}>{children}</animated.div>
}

It's as simple as that to create scroll-in animations when value of isVisible is toggled.

📖 Documentation and Examples

More documentation on the project can be found here.

Pages contain their own examples which you can check out there, or open in codesandbox for a more in-depth view!

📣 What others say

Used by

And many others...

Backers

Thank you to all our backers! 🙏 If you want to join them here, then consider contributing to our Opencollective.

Contributors

This project exists thanks to all the people who contribute.

react-spring (pmndrs/react-spring)

Searching Database…

29.2K ·GitHub
React-spring
Что это такое?react-spring — это библиотека анимаций для React на основе физики пружин. Она позволяет плавно анимировать значения вместо анимаций с фиксированной длительностью и функциями плавности.
Это самостоятельный инструмент для анимации или библиотека, которую импортируют в React?Это библиотека, которую импортируют в проект на React. Она предоставляет хуки для декларативных анимаций или императивный API, если вам так удобнее.
Как добавить её в проект?Установите пакет и используйте его хуки, чтобы анимировать значения, которые меняются в зависимости от состояния, например, создавать анимации появления при прокрутке, когда меняется значение вроде isVisible.
Нужен ли мне react-three-fiber или можно использовать библиотеку только с обычным React?Достаточно обычного react-dom. Поддержка react-three-fiber необязательна и нужна только для анимации 3D-сцен.
Обязательно ли использовать физику пружин для каждой анимации?Нет, пружины используются по умолчанию, но можно применять и анимации с заданной длительностью и функциями плавности, если не хочется движения на основе физики.
Работает ли это вне браузера, например, с 3D или нативными приложениями?Это кроссплатформенное решение внутри экосистемы React: для веба оно работает с react-dom, а для 3D- и WebGL-сцен с react-three-fiber.
Почему стоит выбрать физику пружин вместо CSS-переходов или анимаций в стиле Framer Motion?Физика пружин естественно реагирует на прерывания и на изменение целевого значения прямо во время анимации, создавая плавное, интерактивное движение вместо жёстких анимаций по времени.
Где посмотреть примеры, прежде чем начинать работать с этой библиотекой?На сайте документации есть примеры для каждой страницы, которые можно запустить, и большинство из них можно открыть прямо в CodeSandbox для более детального изучения.
Библиотека активно поддерживается?Да, в репозитории есть активные рабочие процессы CI для сборки, проверок, отслеживания размера бандла и развёртывания документации, а также большое сообщество спонсоров и участников.
What are similar projects?react-dropzone, Libraries.dev, react-slick, theatre, plasma-ui, shaders, material-ui, Viscose-carousel
Which topics is it in?react-components, hooks, frontend-framework, webgl, 3d, animation, ui, react, frontend, nodejs, library, typescript
Creator
pmndrs
Size
654 MB
Stars
29.2K
Updated
CommitOct 05Releasev10.1.2Jun 24
Age
8y
Commits · 90 Days