PinePaper Lottie Compatibility Guide
Reference for what survives a Bodymovin (After Effects) ↔ PinePaper round-trip, and what doesn’t. Last verified against v0.5.0-beta.
TL;DR — round-trip score: 7/10
PinePaper’s Lottie import and export are designed for round-tripping simple-to-intermediate animations between After Effects (via Bodymovin) and PinePaper. Core animation data — shapes, transforms, keyframes, timing — round-trips reliably. Advanced features like masks, gradients, effects, and 3D motion paths are out of scope for v0.5 and are documented below as known limitations.
Quick reference
| Feature class | Round-trip | Notes |
|---|---|---|
| Shape geometry (rect, ellipse, path, star, group) | ✅ Solid | All five shape types preserved |
| Layer transforms (position, scale, rotation, opacity) | ✅ Solid | XY only — 3D z is ignored |
| Keyframe animations (with cubic bezier easing) | ✅ Solid | Linear, ease in/out, custom bezier all preserved |
| Fill & stroke (static + animated) | ✅ Solid | Color, width, line caps |
| Trim paths (start, end, offset) | ✅ Good | Animated trim values preserved |
| Text layers (content, font, size, color) | ✅ Good | No text animators |
| Layer timing (in-point, out-point, frame rate) | ✅ Solid | Honored on both sides |
| Hold keyframes | ⚠️ Behavioral round-trip | Converted to two near-identical KFs internally; visual result identical, JSON shape differs |
| Anchor points | ⚠️ Reset on export | Imported correctly; exported as [0, 0, 0]. Position is correct, but rotation center shifts. |
| Null layers / precomp parenting | ⚠️ Flattens | Imported as invisible anchors; not re-emitted on export — children become independent |
| Animated stroke color on text | ⚠️ Imported, not exported | |
| Gradients (fill and stroke) | ❌ Falls back to solid | Parser exists in LottieColorUtils.js but currently unused; gradients import as solid black |
| Masks (alpha / subtract / track matte) | ❌ Not supported | Drop on import |
| Effects (blur, glow, color correction, etc.) | ❌ Not supported | Drop on import |
| Repeater shapes | ❌ Not supported | Drop on import |
| Merge paths, Round corners, Offset path | ❌ Not supported | Drop on import |
| Skew transforms | ❌ Not supported | Use rotation instead |
3D layers (ddd: 1) |
❌ Treated as 2D | z-axis ignored |
| Spatial bezier (3D motion paths) | ❌ Converted to scalar easing | 2D paths only |
| Image layers | ❌ Skipped on import | |
| Text animators (per-character animation) | ❌ Not supported |
Migration notes
If you have a Bodymovin file that uses unsupported features and you want it to round-trip cleanly through PinePaper:
-
In After Effects, before exporting:
- Bake or remove gradients (replace with solid colors)
- Remove masks and effects
- Convert text animators to keyframe animation on the whole text layer
- Flatten any 3D layers to 2D
- Replace skew with rotation if you need rotation-like distortion
-
After importing into PinePaper:
- Manually recreate the dropped features using PinePaper’s native systems:
- Gradients → use the FilterSystem’s gradient fill
- Masks → use the MaskingSystem (14 mask presets)
- Effects → use the EffectSystem or FilterSystem
- 3D motion → use the camera_animates relation
- Manually recreate the dropped features using PinePaper’s native systems:
-
Re-export will omit unsupported features. A scene that uses PinePaper-only features (rigging, knowledge graph relations, math generators) will lose those features when exported to Lottie. Lottie is the lossy bridge to AE — use it when you need AE-compatible output, not as PinePaper’s primary export format.
What works exceptionally well
These are the strengths of the current implementation — features users can rely on without surprises:
Shape preservation
All five Lottie shape types (rectangle, ellipse, path, star, group) survive a
full round-trip with bezier handles intact. Path morphing animations
(shapeKey keyframes) preserve segment positions to within ±0.5 vertex precision.
Easing curves
Custom cubic bezier easing curves are preserved on both sides via the
[x1, y1, x2, y2] array format. Named easings (linear, easeIn, easeOut, easeInOut)
are emitted as their canonical bezier curves and re-imported correctly. Elastic
and bounce easings are emulated as bezier approximations and survive the round-trip.
Group hierarchy
Nested groups (group A contains group B contains path) round-trip with transform inheritance — child items inherit their parent group’s scale and rotation correctly.
Layer timing
ip (in-point), op (out-point), and fr (frame rate) are honored on both
sides. A layer that appears at 1.5s and disappears at 4.0s in After Effects
will appear and disappear at the same times in PinePaper, and re-export to
Lottie will set ip and op correctly.
Color animation
Animated fill colors interpolate correctly between keyframes on import and export. The interpolation algorithm matches Lottie’s expected behavior.
Suggested verification when you import a Lottie file
- Open the imported scene in PinePaper
- Press K to play the timeline — does the animation match what you saw in After Effects?
- Check the shapes — are all the shapes from your AE composition present?
- Check the colors — are fill colors correct?
- Re-export to Lottie via
app.exportLottie() - Open the re-exported file in lottiefiles.com viewer — does it still play correctly?
If any of those steps fail, the cause is most likely one of the unsupported features above. Check the browser console for warnings — the importer logs when it encounters unsupported features.
Known limitations vs. roadmap
The known limitations above are deliberate v0.5 scope constraints, not bugs. Several may be addressed in v0.6 or later if there’s user demand:
Likely to be addressed in v0.6:
- Hold keyframe export as
h: 1(currently round-trips correctly via duplicate KFs, but JSON is verbose) - Anchor point preservation on export (currently resets to [0, 0, 0])
- Null layer / precomp parenting on export
Not on the roadmap:
- Effects (blur, glow, etc.) — PinePaper has its own EffectSystem with different conventions; no plan to translate
- Track mattes — PinePaper’s MaskingSystem is not Lottie-equivalent
- Text animators — fundamentally different model from PinePaper’s letter collage
- 3D layers — out of scope (see
decision_ecosystem_positioning.md)
If you hit a limitation that’s blocking real work, file feedback and we’ll prioritize accordingly.
File reference for developers
For contributors who want to extend the Lottie module:
| File | Purpose | Lines |
|---|---|---|
js/lottie/LottieImporter.js |
Lottie JSON → PinePaper scene | 652 |
js/lottie/LottieExporter.js |
PinePaper scene → Lottie JSON | 847 |
js/lottie/LottieKeyframes.js |
Keyframe time/value/easing extraction | 310 |
js/lottie/LottieShapeParser.js |
Shape parsing (rect, ellipse, path, star, etc.) | 529 |
js/lottie/LottieColorUtils.js |
Color conversion (RGB[0-1] ↔ CSS); gradient parsing exists but unused | 163 |
js/lottie/LottieTokenizer.js |
Round-trip Lottie ↔ compact tokens for LLM training | 491 |
Last updated
2026-04-09 — round-trip audit pass for v0.5.0-beta release. Verified against:
- Bodymovin 5.10.x output samples
- PinePaper LottieExporter v0.5