skills.rest
gmolike
gmolikeCOMMUNITY
Explore all skills by this author →
GitHub

lottie

Integrates lottie-web and dotLottie animations into HyperFrames with deterministic seeking.

Updated Mar 4, 2026
Search Tags:#animation#motion graphics#lottie#lottie-web#after effects#dotlottie#hyperframes
One-click install
npx skills add https://github.com/gmolike/Claude-Template --skill lottie-gmolike
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: lottie
Source: https://github.com/gmolike/Claude-Template/tree/main/.agents/skills/lottie
Command: npx skills add https://github.com/gmolike/Claude-Template --skill lottie-gmolike

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires lottie-web, @lottiefiles/dotlottie-web.

What problem does it solve? Embedding Lottie animations in HyperFrames requires a specific registration and playback contract so the runtime adapter can seek animations deterministically; this Skill provides the exact integration patterns to avoid broken or non-seekable animations. ## Core Features & Use Cases - lottie-web Integration: Load After Effects JSON exports with autoplay disabled and register them on window.__hfLottie for frame-accurate seeking. - dotLottie Player Support: Configure @lottiefiles/dotlottie-web canvas players with local .lottie assets under the same registry contract. - Multi-Animation Scenes: Push multiple players into one registry so HyperFrames seeks all animations to the same composition time. - Use Case: You have a logo reveal exported from After Effects as JSON. Use this Skill to embed it in a HyperFrames page, register it on window.__hfLottie, and validate it with npx hyperframes lint and validate. ## Quick Start Add a lottie-web animation from my assets folder to my HyperFrames page and register it so HyperFrames can seek it deterministically.

Frequently Asked Questions about lottie

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a Lottie animation to HyperFrames?▼

Load the animation with lottie-web using autoplay set to false and a local path, then push the returned animation instance onto window.__hfLottie. HyperFrames seeks it with goToAndStop using the composition time.

lottie-web vs dotLottie player for HyperFrames animations?▼

lottie-web renders JSON exports via SVG and is sought with goToAndStop, while dotLottie uses a canvas player for .lottie files and is sought via frame or percentage APIs. Both must be registered on window.__hfLottie.

Can I use multiple Lottie animations in one HyperFrames page?▼

Yes, push each animation or player instance into the same window.__hfLottie array. HyperFrames seeks all registered players to the same composition time.

Why is my Lottie animation not seeking in HyperFrames?▼

Common causes are autoplay left enabled, calling play() manually, or registering the player asynchronously after HyperFrames validation already inspected the page. Ensure autoplay is false and registration happens synchronously.

What are the limitations of Lottie animations in HyperFrames?▼

Remote path URLs should be avoided at render time, and unsupported After Effects effects may not survive export. Test the JSON or .lottie file in a browser first and run npx hyperframes lint and validate after editing.

Related Skills

Explore More Design & Creative Skills→
freshtechbrofreshtechbro
682

lottie-animations

Integrate Lottie JSON and dotLottie animations into web and React applications.

Community
Intermediate
hugotownhugotown

animejs

Registers Anime.js animations as seek-driven instances inside HyperFrames compositions.

Community
Intermediate
mooch10mooch10
1

hyperframes-animation

Compose deterministic GSAP animations from atomic motion rules, blueprints, and runtime adapters.

Community
Advanced
openaiopenai
5.3k

remotion-markup

Write Remotion React markup with frame-driven animations, media components, and visual effects.

Official
Advanced