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.
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.
Add the latest version of roact-spring to your wally.toml (e.g., RoactSpring = "chriscerie/roact-spring@^0.0"
)
roact-spring
is also available for roblox-ts projects. Install it with npm:
npm i @rbxts/roact-spring
Getting started with roact-spring is as simple as:
local toggle, setToggle = hooks.useState(false)
local styles = RoactSpring.useSpring(hooks, {
transparency = if toggle then 1 else 0,
})
-- Later
setToggle(function(prevState)
return not prevState
end)
local styles, api = RoactSpring.useSpring(hooks, 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.
These demos are publicly available. Click on each gif to go to their source.
roact-spring
is available under the MIT license. See LICENSE for details.