A modern spring-physics based animation library for Roact inspired by react-spring
npm install @rbxts/roact-springroact-spring is the perfect bridge between declarative and imperative animations. It takes the best of both worlds and packs them into one flexible library.
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.
roact-spring works with most data types and provides extensible configurations that makes it painless to create advanced animations.
RoactSpring = "chriscerie/roact-spring@^0.0")
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.