@animatorkit/editor 0.5.0-beta → 0.6.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 +17 -31
- package/cli.js +1 -1
- package/editor.js +13 -13
- package/editorkitkey.js +4 -2
- package/llm.txt +154 -199
- package/package.json +4 -4
- package/server.js +1 -1
- package/types/editorkitkey.d.ts +9 -6
- package/types/gui/gates/images.d.ts +9 -0
- package/types/gui/license.d.ts +4 -3
- package/version.js +2 -2
- package/vite.js +1 -1
package/README.md
CHANGED
|
@@ -1,20 +1,18 @@
|
|
|
1
1
|
# Anime.js Editor
|
|
2
2
|
|
|
3
|
-
A
|
|
4
|
-
|
|
5
|
-
The editor runs on [tweaks](https://github.com/juliangarnier/tweaks). Set it up in your project folder:
|
|
3
|
+
A visual editor for [Anime.js](https://animejs.com) animations. Tweak durations, delays, easing curves, keyframes, and more in real time, then save the changes back to your source code as plain anime.js.
|
|
6
4
|
|
|
7
5
|
```bash
|
|
8
6
|
npx @animatorkit/editor
|
|
9
7
|
```
|
|
10
8
|
|
|
11
|
-
The command installs
|
|
9
|
+
The command installs what the editor needs and sets up your project: the Vite plugin with Vite, or an `editor` script that starts the save server without Vite.
|
|
12
10
|
|
|
13
|
-
To update
|
|
11
|
+
To update, run `npm i -D @animatorkit/editor@latest`, or the kit command with [Editor Kit](#editor-kit).
|
|
14
12
|
|
|
15
13
|
## With Vite
|
|
16
14
|
|
|
17
|
-
The plugin loads the editor
|
|
15
|
+
The plugin loads the editor in `vite dev` and saves through the Vite server. Your builds never include the editor.
|
|
18
16
|
|
|
19
17
|
```js
|
|
20
18
|
// vite.config.js
|
|
@@ -26,7 +24,7 @@ export default defineConfig({ plugins: [editor()] });
|
|
|
26
24
|
|
|
27
25
|
## Without Vite
|
|
28
26
|
|
|
29
|
-
Start the save server
|
|
27
|
+
Start the save server, then import the editor in your code:
|
|
30
28
|
|
|
31
29
|
```bash
|
|
32
30
|
npm run editor
|
|
@@ -36,11 +34,11 @@ npm run editor
|
|
|
36
34
|
import '@animatorkit/editor';
|
|
37
35
|
```
|
|
38
36
|
|
|
39
|
-
|
|
37
|
+
To use another port, run `npm run editor 7349`.
|
|
40
38
|
|
|
41
39
|
## Using the editor
|
|
42
40
|
|
|
43
|
-
The editor
|
|
41
|
+
The editor lists every `animate`, `createTimeline`, `utils.set`, and `createLayout` call that has an `id`:
|
|
44
42
|
|
|
45
43
|
```js
|
|
46
44
|
import { animate } from 'animejs';
|
|
@@ -52,41 +50,29 @@ animate('.box', {
|
|
|
52
50
|
});
|
|
53
51
|
```
|
|
54
52
|
|
|
55
|
-
## Demo pages
|
|
56
|
-
|
|
57
|
-
On a page with no save server, such as a non-commercial public demo, disable saving right after the import. The panel and its versions keep working in the session, and the page never contacts a server:
|
|
58
|
-
|
|
59
|
-
```js
|
|
60
|
-
import { editor } from '@animatorkit/editor';
|
|
61
|
-
|
|
62
|
-
editor.config({ save: false });
|
|
63
|
-
```
|
|
64
|
-
|
|
65
|
-
The editor plays each animation once. To keep a looping demo looping, turn the transport loop on by default with `editor.config({ defaultPlayback: { loop: true } })`.
|
|
66
|
-
|
|
67
|
-
To open the demo on one animation or timeline child, select it by its id after the call that carries it:
|
|
68
|
-
|
|
69
|
-
```js
|
|
70
|
-
editor.select('letters pop');
|
|
71
|
-
```
|
|
72
|
-
|
|
73
53
|
## Coding agents
|
|
74
54
|
|
|
75
|
-
Point your coding agent to `node_modules/@animatorkit/editor/llm.txt
|
|
55
|
+
Point your coding agent to `node_modules/@animatorkit/editor/llm.txt`. It holds the rules for writing animations the editor can edit.
|
|
76
56
|
|
|
77
57
|
## Editor Kit
|
|
78
58
|
|
|
79
59
|
The stagger, random, onScroll, spring, steps, and irregular editors and the on-page gizmo are Editor Kit features. The free version still shows, retimes, copies, and saves those values when your code uses them.
|
|
80
60
|
|
|
81
|
-
Get Editor Kit at [
|
|
61
|
+
Get Editor Kit at [animejs.com/animatorkit](https://animejs.com/animatorkit), then run the kit command in your project and paste the key from your account page:
|
|
82
62
|
|
|
83
63
|
```bash
|
|
84
64
|
npx @animatorkit/editor kit
|
|
85
65
|
```
|
|
86
66
|
|
|
87
|
-
|
|
67
|
+
Run it again to update Editor Kit, or after cloning a project. Teammates and build servers without Editor Kit get the free editor. Without Vite, import `@animatorkit/editor-kit` instead of `@animatorkit/editor`.
|
|
68
|
+
|
|
69
|
+
To go back to the free editor:
|
|
70
|
+
|
|
71
|
+
```bash
|
|
72
|
+
npx @animatorkit/editor free
|
|
73
|
+
```
|
|
88
74
|
|
|
89
|
-
|
|
75
|
+
See the [installation guide](https://animejs.com/documentation/editor/getting-started/installation) for the details.
|
|
90
76
|
|
|
91
77
|
## License
|
|
92
78
|
|
package/cli.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
#!/usr/bin/env node
|
|
2
2
|
/*!
|
|
3
|
-
* Anime.js Editor v0.
|
|
3
|
+
* Anime.js Editor v0.6.0
|
|
4
4
|
* Copyright (c) Julian Garnier. All rights reserved.
|
|
5
5
|
* Free to use under the Anime.js Editor License, see LICENSE.md. It may be redistributed only
|
|
6
6
|
* as the unmodified @animatorkit/editor package, and it may not be copied or modified.
|