The following is a very brief introduction to roact-spring. Visit the official repository for more information.
roact-spring
roact-spring is a modern spring-physics based animation library for Roact inspired by react-spring. Instead of fixed durations, it uses physical properties like mass and tension to enable fluid and natural animations.
This library represents a modern approach to animation. It is the perfect bridge between declarative and imperative animations. It takes the best of both worlds and packs them into one flexible library.
Why springs and not durations
The principle you will be working with is called a spring, it does not have a defined curve or a set duration. In that it differs greatly from the animation you are probably used to. We think of animation in terms of time and curves, but that in itself causes most of the struggle we face when trying to make elements on the screen move naturally, because nothing in the real world moves like that.
We are so used to time-based animation that we believe that struggle is normal, dealing with arbitrary curves, easings, time waterfalls, not to mention getting this all in sync. As Andy Matuschak (ex Apple UI-Kit developer) expressed it once: Animation APIs parameterized by duration and curve are fundamentally opposed to continuous, fluid interactivity.
Why roact-spring
roact-spring comes with powerful props and configs that enable advanced UI animations. It works with almost all datatypes, greatly improving developer experience. The following are the principles of 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 look 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.
Getting started
The following example uses useSpring. There are more classes and hooks to use as well as more props and configs to apply. Be sure to see the documentation for more details.
Either: declaratively overwrite values to change the animation
If you re-render the component, the animation will update.
local styles = RoactSpring.useSpring(hooks, {
transparency = if toggle then 1 else 0,
})
If you want the animation to run on mount, you can use from to set the initial value.
local styles = RoactSpring.useSpring(hooks, {
from = { transparency = 0 },
to = { transparency = if toggle then 1 else 0 },
})
Or: pass a function that returns values, and imperatively update using the api
You will get an API table back. It will not automatically animate on mount and re-render, but you can call api.start to start the animation. Handling updates like this is generally preferred as itās more powerful.
local styles, api = RoactSpring.useSpring(hooks, function()
return { transparency = 0 }
})
-- Update spring with new props
api.start({ transparency = if toggle then 1 else 0 })
-- Stop animation
api.stop()
Finally: apply styles to components
return Roact.createElement("Frame", {
Transparency = styles.transparency,
Size = UDim2.fromScale(0.3, 0.3),
})
Demos
These demos are publicly available. Visit the repo to see their sources.
Draggable element
Draggable list
Staggered list
Staggered text
Trailing elements
