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 = "firere/roact-spring@^0.0")

roact-spring is also available for roblox-ts projects. Install it with npm:

npm i @firere/roact-spring

This version only supports my version of Roact when used in roblox-ts projects. To use regular roact-spring, head here.

Getting started with roact-spring is as simple as:

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)

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.

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.