Menu
Lottie integration patterns for Helios. Use when rendering Lottie (Bodymovin) JSON animations synchronously with Helios.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Collection of agent skills for Helios video engine. Use when working with programmatic video creation, browser-native animations, or Helios compositions. Install individual skills by path for specific capabilities.
Core API for Helios video engine. Use when creating compositions, managing timeline state, controlling playback, or subscribing to frame updates. Covers Helios class instantiation, signals, animation helpers, and DOM synchronization.
Patterns for using Helios with Vanilla Canvas API. Use when building high-performance 2D/3D animations without frameworks.
Chart.js integration patterns for Helios. Use when creating animated data visualizations with Chart.js.
Learn how to use D3.js with Helios for data visualization. Use when creating charts, graphs, or data-driven animations.
Patterns for using Helios with Framer Motion. Use when you want to use Framer Motion's physics and transitions but need frame-perfect synchronization with Helios.
| name | example-lottie |
| description | Lottie integration patterns for Helios. Use when rendering Lottie (Bodymovin) JSON animations synchronously with Helios. |
Integrate Lottie (lottie-web) with Helios by manually seeking the Lottie instance based on the Helios timeline.
import { Helios } from '@helios-project/core';
import lottie from 'lottie-web';
import animationData from './animation.json';
const helios = new Helios({ fps: 30, duration: 5 });
const container = document.getElementById('lottie-container');
// 1. Load Animation (Autoplay OFF)
const anim = lottie.loadAnimation({
container,
renderer: 'svg', // or 'canvas'
loop: false,
autoplay: false, // Critical
animationData
});
// 2. Drive with Helios
helios.subscribe(({ currentFrame, fps }) => {
// Convert to milliseconds
const timeMs = (currentFrame / fps) * 1000;
// Seek to exact time
// Second arg 'false' means "time based", not "frame based"
// (Lottie frames != Helios frames usually)
anim.goToAndStop(timeMs, false);
});
Lottie animations have their own internal frame rate. It is usually safer and smoother to seek by time (milliseconds) rather than trying to map Helios frames to Lottie frames, unless you strictly control both.
anim.goToAndStop(timeMs, false);
svg: Good for crisp vectors in DOM mode.canvas: Better for performance in Canvas mode or complex scenes.examples/lottie-animation/