skills.rest
BintzGavin
BintzGavinCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

example-lottie

Synchronize Lottie animations with the Helios timeline using goToAndStop.

94|6|Updated Aug 12, 2025
Search Tags:#web-animation#Helios#lottie-web#Lottie#timeline-synchronization#time-based-seeking
One-click install
npx skills add https://github.com/BintzGavin/helios --skill example-lottie
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: example-lottie
Source: https://github.com/BintzGavin/helios/tree/main/.agents/skills/helios/examples/lottie
Command: npx skills add https://github.com/BintzGavin/helios --skill example-lottie

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill facilitates seamless synchronization of Lottie (Bodymovin) animations with the Helios timeline, enabling precise time-based control of visual playback within Helios scenes.

Core Features & Use Cases

  • Time-based synchronization: drive a Lottie instance by mapping Helios timeline frames to Lottie time and invoking goToAndStop(timeMs, false) for accurate playback.
  • Renderer flexibility: supports SVG or Canvas renderers via lottie-web to suit DOM or canvas-based visuals.
  • Use Case: imagine a Helios scene that coordinates a sequence of JSON animations with timed transitions, ensuring animations match audio cues and narrative beats.

Quick Start

Load the Lottie animation with lottie-web, attach it to a container, and subscribe to the Helios timeline to drive the animation via time-based seeks.

Frequently Asked Questions about example-lottie

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

FAQPage Schema
How do I sync Lottie animations with the Helios timeline?▼

You can sync Lottie animations by subscribing to the Helios timeline and invoking goToAndStop(timeMs, false) to map timeline frames to precise Lottie playback positions.

What is time-based seeking for Lottie web animations?▼

Time-based seeking for Lottie web animations is the process of driving a Lottie instance to a specific time in milliseconds using goToAndStop, ensuring precise visual frame coordination without relying on native playback speed.

Does the Helios Lottie synchronization support canvas renderers?▼

Yes, Helios Lottie synchronization supports both SVG and Canvas renderers via the lottie-web library, allowing you to choose between DOM-based or canvas-based visual rendering for your web scenes.

Why does my Lottie animation not match my Helios timeline audio cues?▼

Your Lottie animation may not match Helios timeline audio cues if it is not using time-based seeking. You must subscribe to the Helios timeline and apply goToAndStop(timeMs, false) to tightly coordinate animation beats with audio.

Do I need the lottie-web library to drive Lottie playback in Helios scenes?▼

Yes, you need the lottie-web library to load and render the JSON animations, along with a minimal Helios integration that subscribes to the timeline to drive the time-based seeks.

Related Skills

Explore More Software Engineering Skills→
BintzGavinBintzGavin
94

example-vanilla

Integrate Helios into vanilla JavaScript/TypeScript projects with DOM and Canvas animations.

Community
Basic
BintzGavinBintzGavin
94

example-framer-motion

Synchronize Helios frames with Framer Motion animations via MotionValue mapping.

Community
Intermediate
heygen-comheygen-com
40.2k

lottie

Integrate Lottie and dotLottie animations into HyperFrames via a registered player interface.

Official
Intermediate
automatedigitalautomatedigital
1

waapi

Create deterministic DOM animations using native WAAPI within HyperFrames playback contexts.

Official
Intermediate