tweenSignal

G
W

This function is heavily inspired by Svelte's tweened function. It allows you to create engaging simple transition animations with just a signal. By default this can automatically tween between a number, array of numbers, or Record of numbers. You can also pass an interpolation function to tween between objects 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
Multiple Value Changes
Fun with Interpolation