example-lottie
CommunitySync Lottie with Helios timeline.
Software Engineering#web-animation#Helios#lottie-web#Lottie#timeline-synchronization#time-based-seeking
AuthorBintzGavin
Version1.0.0
Installs0
System Documentation
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.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: example-lottie Download link: https://github.com/BintzGavin/helios/archive/main.zip#example-lottie Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.