☄️ spr

Springs are a powerful model for describing fluid, physically-based animations. spr is a spring-based motion library for Roblox.

local spr = require(game.ReplicatedStorage.spr)

spr.target(frame, 0.6, 1, {
    Size = UDim2.fromOffset(400, 400)
})

Features

A small, easy to use API

• spr is easy enough for designers and learning programmers to understand.
• spr only needs a target value and motion parameters. It handles all other aspects of animation automatically and correctly, from interaction with the Roblox task scheduler to datatype-specific interpolation.

Easy-to-tune motion

• Motion is defined by frequency and damping ratio.
• Frequency and damping ratio are easy to visualize without running the game. Tuning usually only takes one try.

A robust spring model

• spr's robust analytical motion solver handles a wide variety of spring parameters that cause other spring solvers to fail.
• If spr is given a nonconverging set of motion parameters, it will throw a clear error describing what is wrong and how to fix it.

Tight integration with Roblox datatypes

• spr animates directly over Roblox properties without additional layers of indirection.
• spr performs runtime type checking, providing stronger typing than Roblox instance property setters.
• spr knows how to animate in the ideal space for each datatype.
  • For example, spr will automatically animate Color3 values in perceptually-uniform CIELUV space.

Spring fundamentals

Damping ratio and undamped frequency are the two properties describing a spring's motion.

• Damping ratio describes shape
• Undamped frequency describes speed

Damping ratio

• Damping ratio < 1 overshoots and converges on the target. This is called underdamping.
• Damping ratio = 1 converges on the target without overshooting. This is called critical damping.
• Damping ratio > 1 converges on the target without overshooting, but slower. This is called overdamping.

Critical damping is recommended as the most visually neutral option with no overshoot. Underdamping is recommended for animations that need extra pop.

Damping ratio and frequency can be visualized here.

API

spr.target

spr.target(
   Instance obj,
   number dampingRatio,
   number undampedFrequency,
   table<string, Variant> targetProperties)

Animates the given properties towardes the target values, given damping ratio and frequency values.

Examples

-- damping ratio 1 (critically damped), frequency 4
-- frame quickly moves to the middle of the screen without overshooting
spr.target(frame, 1, 4, {
    Position = UDim2.fromScale(0.5, 0.5)
})

-- damping ratio 1 (critically damped), frequency 1
-- frame slowly moves to the middle of the screen without overshooting
spr.target(frame, 1, 1, {
    Position = UDim2.fromScale(0.5, 0.5)
})

-- damping ratio 0.6 (underdamped), frequency 4
-- frame quickly moves to the middle of the screen, overshoots, and wobbles around the target
spr.target(frame, 0.6, 4, {
    Position = UDim2.fromScale(0.5, 0.5)
})

-- damping ratio 0.6 (underdamped), frequency 1
-- frame slowly moves to the middle of the screen, overshoots, and wobbles around the target
spr.target(frame, 0.6, 1, {
    Position = UDim2.fromScale(0.5, 0.5)
})

spr.stop

spr.stop(
   Instance obj[,
   string property])

Stops animations for a particular property. If a property is not specified, all properties belonging to the instance will stop animating.

Examples

spr.target(frame, 0.6, 1, {
    Position = UDim2.fromScale(1, 1)
})
-- spr is now animating frame.Position

wait(1)

spr.stop(frame, "Position")
-- spr is no longer animating frame.Position

spr.target(frame, 0.6, 1, {
    Position = UDim2.fromScale(1, 1),
    Size = UDim2.fromScale(0.5, 0.5)
})
-- spr is now animating Position and Size

wait(1)

spr.stop(frame)
-- spr is no longer animating Position or Size

Setup

spr is a single-module library.

1. Paste the source of spr.lua into a new ModuleScript
2. Require the ModuleScript with local spr = require(<path to spr>)
3. Follow the above code examples to get started with the API.

Documentation on how to use ModuleScripts can be found here.

roblox-ts

roblox-ts bindings for spr can be installed here.