@penner/responsive-easing 0.0.2 → 0.0.3
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 +11 -8
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -2,7 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
> Context-aware easing functions for smooth, perceptually coherent motion across responsive UIs.
|
|
4
4
|
|
|
5
|
-
[!
|
|
5
|
+
> [!WARNING] > **🚧 Work in Progress** - This package is currently under active development. The API shown in this README is aspirational and not yet implemented. Please check back later for the actual release!
|
|
6
|
+
|
|
7
|
+
[](https://www.npmjs.com/package/@penner/responsive-easing)
|
|
6
8
|
|
|
7
9
|
Responsive Easing adapts motion curves to real-world context—distance, time, and velocity—so animations feel smooth and natural across screen sizes, layouts, and motion segments.
|
|
8
10
|
|
|
@@ -13,6 +15,7 @@ Responsive Easing adapts motion curves to real-world context—distance, time, a
|
|
|
13
15
|
Most easing functions assume a fixed range of motion from 0 to 1. But UI elements don’t always move the same distance or take the same time.
|
|
14
16
|
|
|
15
17
|
This leads to:
|
|
18
|
+
|
|
16
19
|
- Motion that feels too fast on large screens
|
|
17
20
|
- Overshoots that don’t scale properly
|
|
18
21
|
- Janky joins between motion segments
|
|
@@ -25,13 +28,13 @@ This leads to:
|
|
|
25
28
|
## 🚀 Install
|
|
26
29
|
|
|
27
30
|
```bash
|
|
28
|
-
npm install responsive-easing
|
|
31
|
+
npm install @penner/responsive-easing
|
|
29
32
|
```
|
|
30
33
|
|
|
31
34
|
Or with Yarn:
|
|
32
35
|
|
|
33
36
|
```bash
|
|
34
|
-
yarn add responsive-easing
|
|
37
|
+
yarn add @penner/@penner/responsive-easing
|
|
35
38
|
```
|
|
36
39
|
|
|
37
40
|
---
|
|
@@ -39,11 +42,11 @@ yarn add responsive-easing
|
|
|
39
42
|
## 🧪 Basic Usage
|
|
40
43
|
|
|
41
44
|
```ts
|
|
42
|
-
import { createResponsiveEasing } from 'responsive-easing';
|
|
45
|
+
import { createResponsiveEasing } from '@penner/responsive-easing';
|
|
43
46
|
|
|
44
47
|
const easing = createResponsiveEasing({
|
|
45
|
-
distance: 400,
|
|
46
|
-
duration: 600,
|
|
48
|
+
distance: 400, // in pixels
|
|
49
|
+
duration: 600, // in milliseconds
|
|
47
50
|
overshoot: true,
|
|
48
51
|
});
|
|
49
52
|
|
|
@@ -53,7 +56,7 @@ const y = easing(0.5); // evaluates easing at halfway point
|
|
|
53
56
|
Or generate a CSS timing string:
|
|
54
57
|
|
|
55
58
|
```ts
|
|
56
|
-
import { easingToCssLinear } from 'responsive-easing';
|
|
59
|
+
import { easingToCssLinear } from '@penner/responsive-easing';
|
|
57
60
|
|
|
58
61
|
const linearString = easingToCssLinear(easing);
|
|
59
62
|
// → linear(0 0, 0.2 0.1, 0.5 0.7, 1 1)
|
|
@@ -100,7 +103,7 @@ Responsive Easing treats motion as a first-class design element—one that shoul
|
|
|
100
103
|
|
|
101
104
|
Have an idea? Find a bug? Want to shape the future of motion?
|
|
102
105
|
|
|
103
|
-
[Open an issue](https://github.com/
|
|
106
|
+
[Open an issue](https://github.com/robertpenner/responsive-easing/issues) or [start a discussion](https://github.com/robertpenner/responsive-easing/discussions).
|
|
104
107
|
|
|
105
108
|
---
|
|
106
109
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@penner/responsive-easing",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.3",
|
|
4
4
|
"description": "Responsive Easing is a library that dynamically generates easing functions for motion design that intelligently responds to varying conditions.",
|
|
5
5
|
"author": "Robert Penner <robert@robertpenner.com> (https://robertpenner.com)",
|
|
6
6
|
"homepage": "https://github.com/robertpenner/responsive-easing",
|
|
@@ -24,7 +24,8 @@
|
|
|
24
24
|
"types": "dist/index.d.ts",
|
|
25
25
|
"type": "module",
|
|
26
26
|
"files": [
|
|
27
|
-
"
|
|
27
|
+
"README.md",
|
|
28
|
+
"LICENSE"
|
|
28
29
|
],
|
|
29
30
|
"scripts": {
|
|
30
31
|
"dev": "tsc && vite build --watch",
|