---
id: gh-lottie
name: "lottie"
url: https://skills.yangsir.net/skill/gh-lottie
author: heygen-com
domain: multimedia
tags: ["lottie", "animation", "hyperframes", "multimedia", "frontend"]
install_count: 69100
rating: 4.70 (120 reviews)
github: https://github.com/heygen-com/hyperframes/tree/main/skills/lottie
---

# lottie

> Lottie 和 dotLottie 适配器模式，用于 HyperFrames。此技能可用于嵌入 lottie-web JSON 动画、.lottie 文件，或注册实例以实现动画的确定性播放。它确保了动画在 HyperFrames 中的精确控制和同步，适用于 logo 揭示、UI 动效和 After Effects 导出内容的集成，提升了前端动画开发的效率和质量。

**Stats**: 69,100 installs · 4.7/5 (120 reviews)

## Before / After 对比

### 优化 Lottie 动画集成与同步

**Before**:

在 HyperFrames 中手动集成 Lottie 动画时，开发者常遇到播放不同步、时间轴控制不精确等问题，导致需要花费大量时间调试动画行为，影响开发效率和用户体验。

**After**:

借助 Lottie 适配器，动画的加载、播放和同步变得标准化且可预测。开发者可以轻松控制动画时间轴，确保多动画间的精确同步，显著减少调试时间并提升动画表现力。

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

## Readme

# Lottie for HyperFrames

HyperFrames can seek both `lottie-web` and dotLottie players through its `lottie` runtime adapter. Lottie is a strong fit because the animation timeline is already encoded in the asset; HyperFrames only needs a player object it can seek.

## Contract

- Load assets from local project files, usually under `assets/`.
- Set `autoplay: false`.
- Prefer `loop: false` unless the user explicitly wants a loop.
- Register every returned animation or player on `window.__hfLottie`.
- Keep the Lottie container dimensions stable with CSS.

The adapter seeks `lottie-web` with `goToAndStop(timeMs, false)` and dotLottie with frame or percentage APIs depending on player shape.

## lottie-web Pattern

```html
<div id="logo-lottie" class="lottie-layer"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>
<script>
  const anim = lottie.loadAnimation({
    container: document.getElementById("logo-lottie"),
    renderer: "svg",
    loop: false,
    autoplay: false,
    path: "assets/logo-reveal.json",
  });

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

```css
.lottie-layer {
  width: 100%;
  height: 100%;
}
```

## dotLottie Pattern

```html
<canvas id="product-lottie" class="lottie-canvas"></canvas>
<script src="https://unpkg.com/@lottiefiles/dotlottie-web"></script>
<script>
  const player = new DotLottie({
    canvas: document.getElementById("product-lottie"),
    src: "assets/product-flow.lottie",
    autoplay: false,
    loop: false,
  });

  window.__hfLottie = window.__hfLottie || [];
  window.__hfLottie.push(player);
</script>
```

```css
.lottie-canvas {
  width: 100%;
  height: 100%;
  display: block;
}
```

## Multiple Animations

Push each player into the same registry:

```js
window.__hfLottie = window.__hfLottie || [];
window.__hfLottie.push(backgroundAnim);
window.__hfLottie.push(iconAnim);
window.__hfLottie.push(confettiAnim);
```

HyperFrames seeks them all to the same composition time.

## Good Uses

- After Effects exports that are already known to render correctly in lottie-web.
- Logo reveals, icon loops, decorative accents, and product UI motion.
- Translating Remotion Lottie usage into plain HyperFrames HTML.

## Avoid

- Relying on remote `path` URLs at render time.
- Starting playback with `play()`.
- Assuming unsupported After Effects effects will survive export. Test the JSON or `.lottie` file in a browser first.
- Loading a player asynchronously and registering it after HyperFrames validation has already inspected the page.

## Validation

After editing a Lottie composition:

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

## Credits And References

- HyperFrames adapter source: `packages/core/src/runtime/adapters/lottie.ts`.
- lottie-web by Airbnb: https://github.com/airbnb/lottie-web
- lottie-web `loadAnimation` options: https://github.com/airbnb/lottie-web/wiki/loadAnimation-options
- dotLottie web player methods by LottieFiles: https://developers.lottiefiles.com/docs/dotlottie-player/dotlottie-web/methods


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