animejs

Name: animejs
Author: topo-ai

39stars7forks

How to install animejs?

topo-ai/ai-video-skills/animejs

$npx -y skills add topo-ai/ai-video-skills --skill animejs

Installs into the current project.

Summary

Anime.js adapter patterns for HyperFrames. Use when writing Anime.js animations or timelines inside HyperFrames compositions, registering animations on window.__hfAnime, making Anime.js seek-driven and deterministic, or translating Anime.js examples into render-safe HyperFrames H

Files · 1

View on GitHub

SKILL.md

1	# Anime.js for HyperFrames
2
3	HyperFrames can seek Anime.js instances through its `animejs` runtime adapter. The composition owns the animation objects; HyperFrames owns the clock.
4
5	## Contract
6
7	- Create animations or timelines synchronously during composition initialization.
8	- Set `autoplay: false` so Anime.js does not advance on its own clock.
9	- Register every returned animation or timeline on `window.__hfAnime`.
10	- Use finite durations and loop counts.
11	- Avoid callbacks that mutate DOM based on wall-clock time, network state, or unseeded randomness.
12
13	The adapter seeks every registered instance with `instance.seek(timeMs)`, where `timeMs` is HyperFrames time in milliseconds.
14
15	## Basic Pattern
16
17	```html
18	<script src="https://cdn.jsdelivr.net/npm/animejs@4.0.2/lib/anime.iife.min.js"></script>
19	<script>
20	const anim = anime({
21	targets: ".mark",
22	translateX: 280,
23	rotate: "1turn",
24	opacity: [0, 1],
25	duration: 1200,
26	easing: "easeOutExpo",
27	autoplay: false,
28	});
29
30	window.__hfAnime = window.__hfAnime \|\| [];
31	window.__hfAnime.push(anim);
32	</script>
33	```
34
35	## Timeline Pattern
36
37	```html
38	<script>
39	const tl = anime.timeline({
40	autoplay: false,
41	easing: "easeOutCubic",
42	});
43
44	tl.add({
45	targets: ".title",
46	translateY: [40, 0],
47	opacity: [0, 1],
48	duration: 650,
49	}).add(
50	{
51	targets: ".accent",
52	scaleX: [0, 1],
53	duration: 450,
54	},
55	250,
56	);
57
58	window.__hfAnime = window.__hfAnime \|\| [];
59	window.__hfAnime.push(tl);
60	</script>
61	```
62
63	## Module Builds
64
65	If you use an ES module build, the adapter does not care how the instance was created. It only needs the returned object to expose `seek()`, `pause()`, and preferably `play()`:
66
67	```html
68	<script type="module">
69	import { animate } from "https://cdn.jsdelivr.net/npm/animejs/+esm";
70
71	const anim = animate(".chip", {
72	x: "18rem",
73	duration: 900,
74	autoplay: false,
75	});
76
77	window.__hfAnime = window.__hfAnime \|\| [];
78	window.__hfAnime.push(anim);
79	</script>
80	```
81
82	## Good Uses
83
84	- Small SVG and DOM flourishes where Anime.js syntax is compact.
85	- Imported Anime.js examples that can be made seek-driven.
86	- Multiple independent micro-animations pushed into the same registry.
87
88	Use GSAP for complex scene sequencing unless the user specifically asks for Anime.js. GSAP is still the primary HyperFrames authoring path.
89
90	## Avoid
91
92	- Leaving `autoplay` at the Anime.js default.
93	- Depending on `anime.running` auto-discovery instead of explicit `window.__hfAnime.push(...)`.
94	- Infinite loops. Compute a finite repeat count from the composition duration.
95	- Building animations in timers, promises, event handlers, or after async asset loads.
96
97	## Validation
98
99	After editing a composition that uses Anime.js:
100
101	```bash
102	npx hyperframes lint
103	npx hyperframes validate
104	```
105
106	## Credits And References
107
108	- HyperFrames adapter source: `packages/core/src/runtime/adapters/animejs.ts`.
109	- Anime.js documentation for `autoplay`, `pause()`, and `seek()`: https://animejs.com/documentation/

People who liked this also viewed

6 picks

Type

animejs

39stars7forks

View on GitHub

How to install animejs?

topo-ai/ai-video-skills/animejs

$npx -y skills add topo-ai/ai-video-skills --skill animejs

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Anime.js for HyperFrames
2
3	HyperFrames can seek Anime.js instances through its `animejs` runtime adapter. The composition owns the animation objects; HyperFrames owns the clock.
4
5	## Contract
6
7	- Create animations or timelines synchronously during composition initialization.
8	- Set `autoplay: false` so Anime.js does not advance on its own clock.
9	- Register every returned animation or timeline on `window.__hfAnime`.
10	- Use finite durations and loop counts.
11	- Avoid callbacks that mutate DOM based on wall-clock time, network state, or unseeded randomness.
12
13	The adapter seeks every registered instance with `instance.seek(timeMs)`, where `timeMs` is HyperFrames time in milliseconds.
14
15	## Basic Pattern
16
17	```html
18	<script src="https://cdn.jsdelivr.net/npm/animejs@4.0.2/lib/anime.iife.min.js"></script>
19	<script>
20	const anim = anime({
21	targets: ".mark",
22	translateX: 280,
23	rotate: "1turn",
24	opacity: [0, 1],
25	duration: 1200,
26	easing: "easeOutExpo",
27	autoplay: false,
28	});
29
30	window.__hfAnime = window.__hfAnime \|\| [];
31	window.__hfAnime.push(anim);
32	</script>
33	```
34
35	## Timeline Pattern
36
37	```html
38	<script>
39	const tl = anime.timeline({
40	autoplay: false,
41	easing: "easeOutCubic",
42	});
43
44	tl.add({
45	targets: ".title",
46	translateY: [40, 0],
47	opacity: [0, 1],
48	duration: 650,
49	}).add(
50	{
51	targets: ".accent",
52	scaleX: [0, 1],
53	duration: 450,
54	},
55	250,
56	);
57
58	window.__hfAnime = window.__hfAnime \|\| [];
59	window.__hfAnime.push(tl);
60	</script>
61	```
62
63	## Module Builds
64
65	If you use an ES module build, the adapter does not care how the instance was created. It only needs the returned object to expose `seek()`, `pause()`, and preferably `play()`:
66
67	```html
68	<script type="module">
69	import { animate } from "https://cdn.jsdelivr.net/npm/animejs/+esm";
70
71	const anim = animate(".chip", {
72	x: "18rem",
73	duration: 900,
74	autoplay: false,
75	});
76
77	window.__hfAnime = window.__hfAnime \|\| [];
78	window.__hfAnime.push(anim);
79	</script>
80	```
81
82	## Good Uses
83
84	- Small SVG and DOM flourishes where Anime.js syntax is compact.
85	- Imported Anime.js examples that can be made seek-driven.
86	- Multiple independent micro-animations pushed into the same registry.
87
88	Use GSAP for complex scene sequencing unless the user specifically asks for Anime.js. GSAP is still the primary HyperFrames authoring path.
89
90	## Avoid
91
92	- Leaving `autoplay` at the Anime.js default.
93	- Depending on `anime.running` auto-discovery instead of explicit `window.__hfAnime.push(...)`.
94	- Infinite loops. Compute a finite repeat count from the composition duration.
95	- Building animations in timers, promises, event handlers, or after async asset loads.
96
97	## Validation
98
99	After editing a composition that uses Anime.js:
100
101	```bash
102	npx hyperframes lint
103	npx hyperframes validate
104	```
105
106	## Credits And References
107
108	- HyperFrames adapter source: `packages/core/src/runtime/adapters/animejs.ts`.
109	- Anime.js documentation for `autoplay`, `pause()`, and `seek()`: https://animejs.com/documentation/

People who liked this also viewed

6 picks

Type