Skip to content

Commit 9d3df76

Browse files
authored
tween docs: flesh out description, define all arguments (#720)
2 parents f9e6694 + 100628b commit 9d3df76

File tree

1 file changed

+40
-2
lines changed

1 file changed

+40
-2
lines changed

packages/tween/README.md

Lines changed: 40 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@
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

3068
See [CHANGELOG.md](./CHANGELOG.md)

0 commit comments

Comments
 (0)