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

Ready to run

npx skills add https://github.com/BintzGavin/helios --skill example-lottie

💬 Prompt for ChatGPT / Claude Chat▼

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.