slowmo 0.3.0 → 0.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +29 -53
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,14 +1,10 @@
|
|
|
1
1
|
# slowmo
|
|
2
2
|
|
|
3
|
-
Slow down
|
|
3
|
+
Slow down or speed up time, to debug or study web animations.
|
|
4
4
|
|
|
5
5
|
<!-- TODO: Add hero GIF/video here -->
|
|
6
6
|
<!--  -->
|
|
7
7
|
|
|
8
|
-
[](https://www.npmjs.com/package/slowmo)
|
|
9
|
-
[](https://bundlephobia.com/package/slowmo)
|
|
10
|
-
[](https://github.com/anthropics/slowmo/blob/main/LICENSE)
|
|
11
|
-
|
|
12
8
|
## Why?
|
|
13
9
|
|
|
14
10
|
- **Debug animations** - Slow things down to see exactly what's happening
|
|
@@ -21,51 +17,18 @@ Slow down any web animation with one line of code.
|
|
|
21
17
|
npm install slowmo
|
|
22
18
|
```
|
|
23
19
|
|
|
24
|
-
```bash
|
|
25
|
-
pnpm add slowmo
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
```bash
|
|
29
|
-
yarn add slowmo
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
Or use a CDN:
|
|
33
|
-
|
|
34
|
-
```html
|
|
35
|
-
<script type="module">
|
|
36
|
-
import { slowmo } from 'https://esm.sh/slowmo';
|
|
37
|
-
slowmo(0.5);
|
|
38
|
-
</script>
|
|
39
|
-
```
|
|
40
|
-
|
|
41
20
|
## Quick Start
|
|
42
21
|
|
|
43
22
|
```js
|
|
44
|
-
import { slowmo } from
|
|
23
|
+
import { slowmo } from "slowmo";
|
|
45
24
|
|
|
46
|
-
slowmo(0.5);
|
|
25
|
+
slowmo(0.5); // That's it, now anything that moves will go half speed.
|
|
47
26
|
```
|
|
48
27
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
## What It Works With
|
|
52
|
-
|
|
53
|
-
| Type | How |
|
|
54
|
-
|------|-----|
|
|
55
|
-
| CSS Animations | Web Animations API `playbackRate` |
|
|
56
|
-
| CSS Transitions | Web Animations API `playbackRate` |
|
|
57
|
-
| Videos & Audio | `playbackRate` property |
|
|
58
|
-
| requestAnimationFrame | Patched timestamps |
|
|
59
|
-
| performance.now() | Returns virtual time |
|
|
60
|
-
| GSAP | `globalTimeline.timeScale()` (auto-detected) |
|
|
61
|
-
| Three.js | Uses rAF, works automatically |
|
|
62
|
-
| Framer Motion | Uses Web Animations API, works automatically |
|
|
63
|
-
| Canvas animations | Uses rAF, works automatically |
|
|
64
|
-
|
|
65
|
-
## API
|
|
28
|
+
## Full API
|
|
66
29
|
|
|
67
30
|
```js
|
|
68
|
-
import { slowmo } from
|
|
31
|
+
import { slowmo } from "slowmo";
|
|
69
32
|
|
|
70
33
|
// Set speed (0.5 = half speed, 2 = double speed)
|
|
71
34
|
slowmo(0.5);
|
|
@@ -81,29 +44,41 @@ slowmo.setSpeed(0.5);
|
|
|
81
44
|
slowmo.pause();
|
|
82
45
|
slowmo.play();
|
|
83
46
|
slowmo.reset();
|
|
84
|
-
slowmo.getSpeed();
|
|
47
|
+
slowmo.getSpeed(); // Returns current speed
|
|
85
48
|
```
|
|
86
49
|
|
|
87
50
|
### Speed Guide
|
|
88
51
|
|
|
89
|
-
| Speed | Effect
|
|
90
|
-
|
|
91
|
-
| `0`
|
|
52
|
+
| Speed | Effect |
|
|
53
|
+
| ----- | -------------------------------- |
|
|
54
|
+
| `0` | Paused |
|
|
92
55
|
| `0.1` | 10x slower (great for debugging) |
|
|
93
|
-
| `0.5` | Half speed
|
|
94
|
-
| `1`
|
|
95
|
-
| `2`
|
|
56
|
+
| `0.5` | Half speed |
|
|
57
|
+
| `1` | Normal |
|
|
58
|
+
| `2` | Double speed |
|
|
96
59
|
|
|
97
60
|
### Excluding Elements
|
|
98
61
|
|
|
99
62
|
Add `data-slowmo-exclude` to opt out specific elements:
|
|
100
63
|
|
|
101
64
|
```html
|
|
102
|
-
<div data-slowmo-exclude>
|
|
103
|
-
This animation runs at normal speed
|
|
104
|
-
</div>
|
|
65
|
+
<div data-slowmo-exclude>This animation runs at normal speed</div>
|
|
105
66
|
```
|
|
106
67
|
|
|
68
|
+
## What It Works With
|
|
69
|
+
|
|
70
|
+
| Type | How |
|
|
71
|
+
| --------------------- | -------------------------------------------- |
|
|
72
|
+
| CSS Animations | Web Animations API `playbackRate` |
|
|
73
|
+
| CSS Transitions | Web Animations API `playbackRate` |
|
|
74
|
+
| Videos & Audio | `playbackRate` property |
|
|
75
|
+
| requestAnimationFrame | Patched timestamps |
|
|
76
|
+
| performance.now() | Returns virtual time |
|
|
77
|
+
| GSAP | `globalTimeline.timeScale()` (auto-detected) |
|
|
78
|
+
| Three.js | Uses rAF, works automatically |
|
|
79
|
+
| Framer Motion | Uses Web Animations API, works automatically |
|
|
80
|
+
| Canvas animations | Uses rAF, works automatically |
|
|
81
|
+
|
|
107
82
|
## Limitations
|
|
108
83
|
|
|
109
84
|
- **Frame-based animations** that don't use timestamps can't be smoothly slowed (they increment by a fixed amount each frame regardless of time)
|
|
@@ -117,4 +92,5 @@ MIT
|
|
|
117
92
|
---
|
|
118
93
|
|
|
119
94
|
<!-- TODO: Update with actual website URL -->
|
|
120
|
-
|
|
95
|
+
|
|
96
|
+
[Website](https://slowmo.dev) · [GitHub](https://github.com/seflless/slowmo) · [npm](https://www.npmjs.com/package/slowmo)
|