Install

Lottie

Lottie

Compile Pax scenes to Lottie JSON, validate, repair, optimize, and preview animations locally with the paxfx CLI and @pax-sh/lottie.

2 min readUpdated GitHubLottie
Basic animation

Pax compiles supported scene subsets to Lottie JSON, then validates, repairs, optimizes, and previews them. The pipeline is deterministic and local. Pax does not claim full After Effects feature parity.

Installation

From monorepo source

pnpm
git clone https://github.com/pax-design/pax.git
cd pax
corepack enable
pnpm install
pnpm build

Usage

Create a reproducible example, convert a scene, and preview the output:

pnpm paxfx create lottie logo
pnpm paxfx lottie convert examples/logo/scene.json
pnpm paxfx lottie validate examples/logo/animation.json
pnpm paxfx lottie preview examples/logo/animation.json

The convert step writes a sibling .lottie.json file next to your scene. Validation returns structured issues with paths and severities.

Examples

Shape and transform keyframes

pnpm paxfx create lottie logo
pnpm paxfx lottie inspect examples/logo/animation.json

The compiler supports shape and text layers, with opacity keyframes compiled from scene tracks.

Text strategy

Text layers compile to Lottie type 5 layers. Font strategy follows the scene specification. Unsupported font features are not claimed.

Markers

Compiled animations include a complete marker at the out-point, which QA tooling uses to detect the end of playback.

Optimize and repair pipeline

pnpm paxfx lottie repair examples/logo/animation.json
pnpm paxfx lottie optimize examples/logo/animation.json

Repair applies high-confidence fixes in place. Optimize reports byte size before and after compaction.

Compatibility

FeatureStatus
Shapes and fillsSupported
Transforms and opacity keyframesSupported
Text strategySupported (subset)
MarkersSupported
ExpressionsNot claimed
3D cameras and lightsNot in Lottie compiler
Arbitrary AE effectsNot claimed

API Reference

CLI commands

All commands accept global flags: --json, --verbose, --quiet, --no-color, --ci, --cwd.

paxfx create lottie [name]

type: command · default: loading

Scaffold a reproducible example with scene.json and animation.json under examples/[name]/.

paxfx lottie validate <file>
required

type: command

Validate Lottie JSON structure, dimensions, frame rate, layer timing, and layer presence.

paxfx lottie inspect <file>
required

type: command

Print summary metadata: name, width, height, frame rate, frame count, and layer count.

paxfx lottie repair <file>
required
dangerous

type: command

Apply high-confidence repairs in place. Review changes before committing.

paxfx lottie optimize <file>
required

type: command

Compact animation JSON and report byte size before and after optimization.

paxfx lottie preview <file>
required

type: command

Write a local HTML preview shell under .pax/scenes/lottie-preview.html with reduced-motion fallback.

paxfx lottie convert <scene.json>
required

type: command

Compile a validated Pax scene to Lottie JSON beside the source scene file.

@pax-sh/lottie library

Import from the workspace package after build.

compileSceneToLottie(scene)
required

type: (scene: PaxScene) => LottieAnimation

Compile a supported Pax Scene subset into Lottie JSON.

validateLottie(input)
required

type: (input: unknown) => { ok: boolean; issues: LottieIssue[] }

Schema and structural validation with path-qualified issues.

repairLottie(animation)
required
dangerous

type: (animation: LottieAnimation) => RepairReport

Repair high-confidence structural issues and return change list.

optimizeLottie(animation)
required

type: (animation: LottieAnimation) => OptimizeReport

Optimize animation payload size deterministically.

packDotLottie / unpackDotLottie

type: functions

dotLottie packaging helpers for interactive bundles. See dotLottie.

Scene layer fields

Lottie compilation reads these scene fields today.

layers[].type
required

type: "shape" | "text" | ...

Only shape and text layers compile to Lottie. Other layer types are skipped.

tracks[]

type: Track[]

Opacity keyframes on opacity property compile to Lottie animated opacity when present.

timing.fps
required

type: number

Frame rate for compiled animation (fr).

timing.durationMs
required

type: number

Duration used to compute out-point (op).

Was this page helpful?

Edit this page

Answers are not recorded or transmitted. Pax has no telemetry.