The springSignal and tweenSignal functions are heavily inspired by Svelte's motion functions. They allow you to create engaging transition animations with just a signal. By default, they can automatically transition between a number, array of numbers, or Record of numbers. An interpolation function can be passed to enable transitioning between values of any type.
Animation options can be passed when creating the signal along with signal creation options. They can also be changed by calling setOptions
on the signal or by passing an optional parameter when setting the signal. The values passed while setting the signal will only be used for the duration of the animation.
The motion of the spring animation can be controlled using the stiffness
and damping
parameters. Both of these accept a number between 0 and 1, though values at the extremes will have an unfavorable effect. Because the motion can exceed the desired bounds of the signal, a clamp
option can be set to constrain the animation to the start and destination value of the signal.
Click the surface to update the 2D coordinates and see the spring animation.