---
id: gh-animejs
name: "animejs"
url: https://skills.yangsir.net/skill/gh-animejs
author: heygen-com
domain: ai-frontend-engineering
tags: ["animation", "frontend", "animejs", "hyperframes", "web-dev"]
install_count: 37400
rating: 4.60 (120 reviews)
github: https://github.com/heygen-com/hyperframes/tree/main/skills/animejs
---

# animejs

> 此技能为HyperFrames提供Anime.js适配模式，使动画和时间线可被HyperFrames精确控制。它确保动画可寻址、确定性播放，并支持将Anime.js示例转换为渲染安全的HyperFrames HTML，简化动画集成。

**Stats**: 37,400 installs · 4.6/5 (120 reviews)

## Before / After 对比

### Anime.js动画同步与控制

**Before**:

在HyperFrames中集成Anime.js动画时，动画可能独立运行，难以与主时间轴同步，导致播放不确定、难以调试，且无法实现精确的帧级控制。

**After**:

通过Anime.js适配器，动画被HyperFrames精确控制，实现可寻址、确定性播放。动画与HyperFrames主时间轴完美同步，大幅提升动画集成效率和调试便利性，确保视觉效果一致性。

| Metric | Before | After | Change |
|---|---|---|---|
| 动画同步调试时间 | 60分钟 | 10分钟 | -83% |

## Readme

# Anime.js for HyperFrames

HyperFrames can seek Anime.js instances through its `animejs` runtime adapter. The composition owns the animation objects; HyperFrames owns the clock.

## Contract

- Create animations or timelines synchronously during composition initialization.
- Set `autoplay: false` so Anime.js does not advance on its own clock.
- Register every returned animation or timeline on `window.__hfAnime`.
- Use finite durations and loop counts.
- Avoid callbacks that mutate DOM based on wall-clock time, network state, or unseeded randomness.

The adapter seeks every registered instance with `instance.seek(timeMs)`, where `timeMs` is HyperFrames time in milliseconds.

## Basic Pattern

```html
<script src="https://cdn.jsdelivr.net/npm/animejs@4.0.2/lib/anime.iife.min.js"></script>
<script>
  const anim = anime({
    targets: ".mark",
    translateX: 280,
    rotate: "1turn",
    opacity: [0, 1],
    duration: 1200,
    easing: "easeOutExpo",
    autoplay: false,
  });

  window.__hfAnime = window.__hfAnime || [];
  window.__hfAnime.push(anim);
</script>
```

## Timeline Pattern

```html
<script>
  const tl = anime.timeline({
    autoplay: false,
    easing: "easeOutCubic",
  });

  tl.add({
    targets: ".title",
    translateY: [40, 0],
    opacity: [0, 1],
    duration: 650,
  }).add(
    {
      targets: ".accent",
      scaleX: [0, 1],
      duration: 450,
    },
    250,
  );

  window.__hfAnime = window.__hfAnime || [];
  window.__hfAnime.push(tl);
</script>
```

## Module Builds

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()`:

```html
<script type="module">
  import { animate } from "https://cdn.jsdelivr.net/npm/animejs/+esm";

  const anim = animate(".chip", {
    x: "18rem",
    duration: 900,
    autoplay: false,
  });

  window.__hfAnime = window.__hfAnime || [];
  window.__hfAnime.push(anim);
</script>
```

## Good Uses

- Small SVG and DOM flourishes where Anime.js syntax is compact.
- Imported Anime.js examples that can be made seek-driven.
- Multiple independent micro-animations pushed into the same registry.

Use GSAP for complex scene sequencing unless the user specifically asks for Anime.js. GSAP is still the primary HyperFrames authoring path.

## Avoid

- Leaving `autoplay` at the Anime.js default.
- Depending on `anime.running` auto-discovery instead of explicit `window.__hfAnime.push(...)`.
- Infinite loops. Compute a finite repeat count from the composition duration.
- Building animations in timers, promises, event handlers, or after async asset loads.

## Validation

After editing a composition that uses Anime.js:

```bash
npx hyperframes lint
npx hyperframes validate
```

## Credits And References

- HyperFrames adapter source: `packages/core/src/runtime/adapters/animejs.ts`.
- Anime.js documentation for `autoplay`, `pause()`, and `seek()`: https://animejs.com/documentation/


---
*Source: https://skills.yangsir.net/skill/gh-animejs*
*Markdown mirror: https://skills.yangsir.net/api/skill/gh-animejs/markdown*