99[ ![ size] ( https://img.shields.io/npm/v/@solid-primitives/tween?style=for-the-badge )] ( https://www.npmjs.com/package/@solid-primitives/tween )
1010[ ![ stage] ( https://img.shields.io/endpoint?style=for-the-badge&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsolidjs-community%2Fsolid-primitives%2Fmain%2Fassets%2Fbadges%2Fstage-3.json )] ( https://github.com/solidjs-community/solid-primitives#contribution-process )
1111
12- Creates an efficient tweening function.
12+ Creates an efficient tweening derived signal that smoothly transitions
13+ a given signal from its previous value to its next value whenever it changes.
1314
1415## Installation
1516
@@ -22,9 +23,46 @@ yarn add @solid-primitives/tween
2223## How to use it
2324
2425``` ts
25- const tweenedValue = createTween (myNumber , { duration: 500 });
26+ import { createSignal } from " solid-js" ;
27+ import { createTween } from " @solid-primitives/tween" ;
28+
29+ const [value, setValue] = createSignal (0 );
30+ const tweenedValue = createTween (value , { duration: 500 });
31+
32+ setMyNumber (100 );
33+ // tweenedValue will now smoothly transition from 0 to 100 over 500 ms
34+ ```
35+
36+ ## Definition
37+
38+ ``` ts
39+ function createTween(
40+ target : Accessor <number >,
41+ options : {
42+ duration? : number = 100 ; // ms
43+ easing? : (t : number ) => number = (t ) => t ;
44+ }
45+ ): Accessor <number >;
2646```
2747
48+ ` target ` can be any reactive value (signal, memo, or function that calls such).
49+ For example, to use a component prop, specify ` () => props.value ` .
50+
51+ You can provide two options:
52+
53+ * ` duration ` is the number of milliseconds to perform the transition
54+ from the previous value to the next value. Defaults to 100.
55+ * ` easing ` is a function that maps a number between 0 and 1 to a number
56+ between 0 and 1, to speed up or slow down different parts of the transition.
57+ The default easing function ` (t) => t ` is linear (no easing).
58+ A common choice is ` (t) => 0.5 - Math.cos(Math.PI * t) / 2 ` .
59+
60+ Internally, ` createTween ` uses
61+ [ ` requestAnimationFrame ` ] ( https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame )
62+ to smoothly update the tweened value at the display refresh rate.
63+ After the tweened value reaches the underlying signal value,
64+ it will stop updating via ` requestAnimationFrame ` for efficiency.
65+
2866## Changelog
2967
3068See [ CHANGELOG.md] ( ./CHANGELOG.md )
0 commit comments