Lottie Tokenizer for Efficient Animation Compression

• Lottie Tokenizer is a formal mechanism that converts Lottie JSON animations into linear, tokenized sequences while preserving editability and semantic details.
• It uses a two-stage process—parsing and hierarchical flattening—to efficiently encode animation metadata, vector geometry, and motion parameters.
• The tokenizer achieves significant compression and improved model efficiency, facilitating high-fidelity autoregressive animation generation within pretrained vision-language models.

A Lottie Tokenizer is a formal mechanism for transforming Lottie JSON files—hierarchical representations of vector animation objects and their parametric behaviors—into linear, compact, and semantically structured token sequences suitable for autoregressive modeling. Deployed in frameworks such as OmniLottie and LottieGPT, the Lottie Tokenizer preserves the essential editable structure and fidelity of animations, while achieving orders-of-magnitude compression over naïve text or JSON tokenizers. It is designed to facilitate multi-modal, autoregressive vector animation generation within large pretrained vision-LLMs (VLMs) by eliminating redundant metadata and enabling precise round-trip reconstruction of animation assets (Yang et al., 2 Mar 2026, Chen et al., 13 Apr 2026).

1. Architectural Principles and Design Flow

The Lottie Tokenizer comprises a two-stage process:

1. Parsing and Object Extraction: The raw Lottie JSON is parsed to extract animation metadata (version, frame rate, time span, canvas size, name, 3D flag) and a list of animation layers. Non-parameterizable or sparse-use objects (such as embedded images or audio tracks) are removed to focus exclusively on vector geometry and animation parameters.
2. Hierarchical Flattening to Tokens: The tokenizer traverses the parsed animation in a deterministic order—metadata, layers, shapes, properties—emitting specialized command and parameter tokens that encode animation semantics instead of text-based keys or structural delimiters. Each animation is thus mapped to a single, contiguous token sequence, with all content including geometry, styling, and motion (including keyframes and easing) represented in a quantized, losslessly decodable format (Yang et al., 2 Mar 2026, Chen et al., 13 Apr 2026).

2. Taxonomy of Token Types

Lottie Tokenizers operate with a type-safe vocabulary structured into non-overlapping token classes:

Token Class	Examples	Description
Structural/Command	<META>, <LAYER-τ>, <END>, <PAD>	Defines metadata starts, layer boundaries, and padding
Numeric-Parameter	Quantized values for time, position, rotation, scale, color, opacity	Encodes continuous animation parameters as discrete tokens
Text-Field	Length-prefixed string sequences	Layer names, captions, font names tokenized by VLM encoder
Animation Meta (LottieGPT)	`<	M
Shape Primitive	`<	ITEM_sh
Keyframe/Transform	`<	PROP_ANIMATED

Each numeric semantic type (e.g., time, pos_x, rotation) occupies a dedicated, non-clashing token range, established by scanning full training datasets for empirical minima/maxima and assigning offsets with reserved buffer for outliers (Yang et al., 2 Mar 2026).

3. Parameterization, Quantization, and Formal Grammar

Continuous animation parameters are quantized and mapped into unique token IDs with the formula: $$\operatorname{token}(x,t) = \left\lfloor x \cdot s_t \right\rfloor + o_t$$ Where $s_t$ (scale) and $o_t$ (offset) are type-specific and assigned based on data-wide empirical ranges. This approach ensures no overlap between semantic fields in the token ID space and enables efficient inverse mapping during decode (Yang et al., 2 Mar 2026).

Illustrative parameter offset table:

Type	$x$ Range	$s_t$	#IDs	$o_t$	ID Range
time	[0, 60]	1	61	100	100–160
pos_x, pos_y	[0, 512]	1	513	200	200–712
rotation	[0, 360]	1	361	800	800–1160
scale	[0, 100]	1	101	1200	1200–1300
opacity	[0, 100]	1	101	1400	1400–1500
color_channel	[0, 255]	1	256	1600	1600–1855

The grammar can be summarized as: $s_t$3 Algorithmic pseudocode for end-to-end encode/decode is given in (Yang et al., 2 Mar 2026).

4. Encoding Geometry, Styles, and Motion

A key mechanism of the tokenizer is the emission of explicit layer and shape-primitive tokens (such as <LAYER>, <|ITEM_sh|>, <|ITEM_el|>) which, combined with quantized parameter sequences, preserve the latent editability and compositionality of the original vector animation (Chen et al., 13 Apr 2026).

Style and Fills

Color and style attributes are encoded as single hex color tokens or discrete-valued numeric tokens (stroke width, opacity). Gradients emit small sequences with explicit type, stop/composite, and color details.

Animated Properties and Keyframing

Animated motion (position, anchor, scale, rotation, opacity, fillOpacity, strokeWidth) is always wrapped in a <|PROP_ANIMATED|> block, with each keyframe consisting of a frame index, value(s), and a possible cubic Bezier easing curve:

• Easing is encoded by four control point tokens per non-default curve, achieving great compactness relative to per-frame interpolation.
• The scheme allows for temporal scalability with extreme token efficiency, as only $K$ keyframes (not all $F$ frames) are stored, with savings $1 - K/F$ for long sequences (Chen et al., 13 Apr 2026).

5. Tokenizer Efficiency and Compression Effects

The Lottie Tokenizer achieves substantial reductions in token sequence length, rendering autoregressive modeling viable for complex animations:

• For static SVG-style vector assets: reduction from 2.6 K tokens (naive SVG) to ≤1.3 K tokens with Lottie Tokenizer; post-quantization down to 0.4 K tokens (ratio $r = 0.15$).
• For dynamic LottieAnimation JSON: from 27.5 K (naive) to 17.4 K tokens (Lottie Tokenizer, $s_t$0), and to 6.6 K tokens if quantization is applied ($s_t$1).
• File-level compression results in size reduction from 60.7 KB (raw) to 39.9 KB (field pruning/numeric rounding), roughly 34% smaller without any visible change (Chen et al., 13 Apr 2026, Yang et al., 2 Mar 2026).

These compression gains are not just storage optimizations—they directly affect LLM efficiency and the feasibility of training on long, temporally intensive animations.

6. Integration with Pretrained Vision-LLMs

The Lottie Tokenizer vocabulary is incorporated as an extension of existing VLM token sets (e.g., Qwen2.5-VL or Qwen-VL), adding 441–52,510 Lottie-specific tokens to the model embedding matrix. The pipeline is:

• Multi-modal prompts are tokenized and prepended as context.
• The target Lottie token sequence is generated autoregressively using cross-entropy loss: $s_t$2 At test time, token sequences are generated incrementally, concluded when the final <END> or <EOS> token is emitted, and detokenized with lossless fidelity (Yang et al., 2 Mar 2026, Chen et al., 13 Apr 2026).

A two-stage curriculum (static→dynamic) is employed for large-scale training: static single-frame (SVG→Lottie) and then multi-frame animation data, with interleaved text, image, and video conditioning to stabilize learning and improve compositionality (Chen et al., 13 Apr 2026).

7. Empirical Performance and Impact

Empirical results demonstrate that replacing raw JSON with Lottie Tokenizer sequences in model training dramatically improves both compression and generative fidelity. On LottieBench structural and perceptual metrics:

• Static text→vector: SSIM 0.9776 (Lottie Tokenizer) vs. 0.7051 (OmniSVG).
• Dynamic text→animation: SSIM 0.9886 (Lottie Tokenizer) vs. 0.8661 (Sora2).
• Rendering valid rate increases from ~22% for raw JSON-based training to ~97.8% using the Lottie Tokenizer schema.

The Lottie Tokenizer is a central enabler for state-of-the-art vector animation generation, supporting semantically faithful, fully editable, and highly compressed animation representations, and is foundational to recent advances in multi-modal autoregressive animation models (Chen et al., 13 Apr 2026, Yang et al., 2 Mar 2026).