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 代码库中使用的库，提供用于声明式动画的 hooks，如果你更喜欢，也可以使用命令式 API。
如何把它添加到项目中？安装该包，然后使用其 hooks 对随状态切换的数值做动画，例如在 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