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 looks 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

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

Getting Started

Getting started with roact-spring is as simple as:

Declarative

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)

Imperative

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.

Demos

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

Draggable element

Draggable list

License

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