Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chriscerie/roact-spring
A modern spring-physics based animation library for react-lua based on react-spring
https://github.com/chriscerie/roact-spring
lua react roblox ui
Last synced: 14 days ago
JSON representation
A modern spring-physics based animation library for react-lua based on react-spring
- Host: GitHub
- URL: https://github.com/chriscerie/roact-spring
- Owner: chriscerie
- License: mit
- Created: 2022-01-23T04:17:47.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-07-01T07:36:16.000Z (7 months ago)
- Last Synced: 2024-12-23T06:09:35.451Z (21 days ago)
- Topics: lua, react, roblox, ui
- Language: Lua
- Homepage: https://www.chrisc.dev/roact-spring/
- Size: 3.83 MB
- Stars: 64
- Watchers: 3
- Forks: 17
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-lua - roact-spring - use alternative to [Flipper](https://github.com/Reselim/Flipper) for [Roblox-TS](https://roblox-ts.com). (Motion / Ripple <img src="luau.svg" width="18px" /><img src="roblox-ts.svg" width="18px" />)
- awesome-react-lua - **Repository**
README
roact-spring
A modern spring-physics based animation library for Roact inspired by react-spring
## Why roact-spring
### Declarative and imperative
`roact-spring` is the perfect bridge between declarative and imperative animations. It takes the best of both worlds and packs them into one flexible library.
### Fluid, powerful, painless
`roact-spring` is designed to make animations fluid, powerful, and painless to build and maintain. Animation becomes easy and approachable, and everything you do look and feel natural by default.
### Versatile
`roact-spring` works with most data types and provides extensible configurations that makes it painless to create advanced animations.
## Installation
### Wally
`roact-spring` has two packages to support [react-lua](https://github.com/jsdotlua/react-lua) and [legacy Roact](https://github.com/Roblox/roact). It's crucial to install the correct package or you **will** encounter bugs. To install, add the latest version of roact-spring to your wally.toml:
#### With react-lua
```console
ReactSpring = "chriscerie/react-spring@"
```
Note: react-lua packages under the scope jsdotlua must use react-spring >= 2.0. react-lua packages under the legacy scope corepackages must use react-spring v1.
#### With legacy Roact
```console
RoactSpring = "chriscerie/roact-spring@"
```
### roblox-ts
`roact-spring` is also available for roblox-ts projects. Install it with [npm](https://www.npmjs.com/package/@rbxts/roact-spring):
```console
npm i @rbxts/roact-spring
```
## Getting Started
Getting started with roact-spring is as simple as:
### Declarative
```lua
local toggle, setToggle = React.useState(false)
local styles = RoactSpring.useSpring({
transparency = if toggle then 1 else 0,
})
-- Later
setToggle(function(prevState)
return not prevState
end)
```
### Imperative
```lua
local styles, api = RoactSpring.useSpring(function()
return {
position = UDim2.fromScale(0.3, 0.3),
rotation = 0,
}
})
-- Later
api.start({
position = UDim2.fromScale(0.5, 0.5),
rotation = 45,
config = { tension = 170, friction = 26 },
})
```
More information can be found in roact-spring's official [documentation](https://www.chrisc.dev/roact-spring/).
## Demos
These demos are publicly available. Click on each gif to go to their source.
### Draggable element
### Draggable list
### Staggered list
### Staggered text
### Trailing elements
## License
`roact-spring` is available under the MIT license. See [LICENSE](LICENSE) for details.