roact-spring

A modern spring-physics based
animation library for Roact inspired by react-spring

Why roact-spring

$3

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.

$3

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.

$3

roact-spring works with most data types and provides extensible configurations that makes it painless to create advanced animations.

Installation

$3

Add the latest version of roact-spring to your wally.toml (e.g., RoactSpring = "chriscerie/roact-spring@^0.0")

$3

roact-spring is also available for roblox-ts projects. Install it with npm:
``console
npm i @rbxts/roact-spring
`

Getting Started

Getting started with roact-spring is as simple as:

$3

`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)
`

$3

`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.

Demos

These demos are publicly available. Click on each gif to go to their source.

$3

$3

$3

$3

$3

License

roact-spring` is available under the MIT license. See LICENSE for details.