tweenSignal

G
W

The tweenSignal and springSignal 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

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.

Easings

As a convenience a collection of easing functions are provided such as easeInBack. These can be imported from the submodule, @ddtmm/angular-signal-generators/easings.

You can pass your own easing function. It should have a single numeric parameter that accepts a value between 0 and 1 and returns a value around 0 and 1. It is acceptable that a value might be slightly outside this range during animation, but is should always start at 0 and end at 1.

Simple Value Changes
Animation Multiple Values
Fun with Interpolation