Lottie exporter v1

[pgilfernandez]

Hi,

I've been playing (again) with IA and the idea of using Friction to export to Lottie format as it is a very common to be requested (#720, #516 (comment), https://github.com/orgs/friction2d/discussions/114, https://github.com/orgs/friction2d/discussions/757, https://github.com/orgs/friction2d/discussions/293, https://github.com/orgs/friction2d/discussions/756).
I know @rodlie not much time ago said that, if it would be implemented, it would be exporting to lottie via SVG, that is, Friction to SVG to Lottie.
I investigated that approach but there are no goods parsers and they don't cover all features, we finally went to the option to integrate it into Friction using all the code already prepared for SVG exporting but using it for Lottie instead.

This solution doesn't touch Friction code, animators, etc. it just uses what it is in Lottie advantage (maybe there are one or two little specific tweaks but innocuous to normal Friction.

So, I duplicated the idea of having a fast "preview" and an export dialog window to setup some things and, man, the feature started to work from the very beginning very easy and smooth.
It took some time to add one by one little features ensuring all was as clean and natural as possible.
I almost touched no code, so most of the ideas are the IA ones but made sense to me.

At this moment, the features added are:

• Export shapes, free paths, rectangles, circles, text, groups, and hierarchy
• Export real Friction transform keyframes and easing
• Animated paths with optimized keyframes
• Fill, stroke, gradients, opacity, and stroke-drawing effects
• Blend modes and DstIn / DstOut masking (two adjacent objects or group/layers)
• Text export as outlines, with experimental native text support
• Embedded or relatively linked image assets
• Optimized JSON output without frame-by-frame sampling where possible
• Configurable frame range, background, and preview background
• Temporary HTML preview powered by lottie-web
• Canvas and SVG renderer switching
• Playback modes: Loop, Ping-pong, and Once
• Playback speeds from 0.1x to 4x
• Scrubbing, click-to-play/pause, wireframe, and outline modes
• Preview-only workaround for a lottie-web SVG renderer issue

Some notes:

• Native text remains experimental due to renderer compatibility differences. Lottie supports text and lots of animations related with text, this would be a big and long area to be improved
• The SVG renderer workaround is applied only to temporary preview data and does not modify exported JSON.
• Lottie preview controls use the player-relative 0..totalFrames-1 timeline.

I don't mean with this PR to want it inside Friction, but at least to be discussed as it was kind of effortless and could be treated as an experimental feature (to be even activated or deactivated) but to be honest, it could bring more users or coders to have a look to Friction as an editor...

Test builds (newest):

• Linux: https://github.com/friction2d/friction/actions/runs/27543219456/artifacts/7637316027
• macOS: https://github.com/friction2d/friction/actions/runs/27543219469/artifacts/7637724496
• Windows: https://github.com/friction2d/friction/actions/runs/27543219764/artifacts/7637085319

Try it out and let discuss about it 😄
Cheers

[rodlie]

btw, hidden items are exported.

[pgilfernandez]

btw, hidden items are exported.

What do you mean? In the json file?

[rodlie]

btw, hidden items are exported.

What do you mean? In the json file?

Hide an item and preview/export lottie and the item is there, you will need to exclude hidden items.

[pgilfernandez]

Hide an item and preview/export lottie and the item is there, you will need to exclude hidden items.

Oh! I understand now, yes, you are right, they are not filtered... I will fix it 😉

[rodlie]

btw, added a reference project: https://github.com/friction2d/friction-examples/tree/main/lgm2026-state-of-friction

Can be used for testing/comparing for lottie etc.

[rodlie]

Ok, can confirm latest commit works with https://github.com/friction2d/friction-examples/tree/main/lgm2026-state-of-friction

The lottie preview looks identical(?) to the svg preview.

I do however get a warning in glaxnimate

but it does work

[rodlie]

I will create a Exporter plugin system for v1.1. That way it will be easier to make exporters. We will use this exporter as a reference on how to make a plugin.

Don't worry about the code, I will adapt it.

[pgilfernandez]

Ok, can confirm latest commit works with https://github.com/friction2d/friction-examples/tree/main/lgm2026-state-of-friction

The lottie preview looks identical(?) to the svg preview.

Yes, it does work for me too.

I do however get a warning in glaxnimate

but it does work

I think it's on Glaximate part, I trust the official JSON editor better (it loads with no error at all):
https://lottiefiles.github.io/lottie-docs/playground/json_editor/

Or even a pretty nice online player:
https://svgsprite.com/tools/lottie-player/

[pgilfernandez]

I will create a Exporter plugin system for v1.1. That way it will be easier to make exporters. We will use this exporter as a reference on how to make a plugin.

I like the idea, that way anyone could create and share their own exporter (or improve the available ones). Will default SVG export turn too into a plugin then?

[rodlie]

I will create a Exporter plugin system for v1.1. That way it will be easier to make exporters. We will use this exporter as a reference on how to make a plugin.

I like the idea, that way anyone could create and share their own exporter (or improve the available ones). Will default SVG export turn too into a plugin then?

Not really, SVG is part of the Core, but the SVG export dialog could be a plugin (and could support post-processing of the SVG, an example could be a dialog for creating a interactive SVG/HTML etc).

[pgilfernandez]

I will create a Exporter plugin system for v1.1. That way it will be easier to make exporters. We will use this exporter as a reference on how to make a plugin.

I'm now playing with an importer for already animated SVGs to turn into editable Friction projects, it's progressing fine 😄
This can indeed also be extended to Lottie or dotLottie files 😉

I'm commenting it because I guess they could also be added as plugins for v1.1, doesn't it?

[pgilfernandez]

@rodlie, please, could you manually relaunch the macOS build? I've just fixed an issue and I would like @irwant to test if it's working fine. Thanks

[irwant]

path inside Group layer ungroup in JSON. so it make imposible for opacity animation
test lottie friction.json

[pgilfernandez]

path inside Group layer ungroup in JSON. so it make imposible for opacity animation test lottie friction.json

Hi @irwant, would you mind trying it now with the new builds?:

• Linux: https://github.com/friction2d/friction/actions/runs/27502452069/artifacts/7622320080
• macOS: https://github.com/friction2d/friction/actions/runs/27502452074/artifacts/7622443546
• Windows: https://github.com/friction2d/friction/actions/runs/27502452073/artifacts/7622241030

[irwant]

good. that work perfect.
this is a new request.
in previous version we are seen ungrouped layer is set to parent. I think its possible to make parent effect also work for exported JSON when we have two layer on friction project, layer1 set parent to layer2 .

[pgilfernandez]

this is a new request. in previous version we are seen ungrouped layer is set to parent. I think its possible to make parent effect also work for exported JSON when we have two layer on friction project, layer1 set parent to layer2 .

Hi @irwant, parenting support has been implemented using two export modes:

• Native Lottie parenting: When the parent and child belong to the same composition, the exporter uses Lottie's native parent relationship. The animation remains on the parent layer, producing cleaner and smaller JSON files.

• Baked parenting: When the parent and child belong to different groups or precompositions, native Lottie parenting is not possible. The exporter calculates and exports the child's resulting position, rotation, and scale as keyframes.

This allows Friction Parent Effects to work across groups while using native Lottie parenting whenever possible.

Try it out with the newest builds:

• Linux: https://github.com/friction2d/friction/actions/runs/27543219456/artifacts/7637316027
• macOS: https://github.com/friction2d/friction/actions/runs/27543219469/artifacts/7637724496
• Windows: https://github.com/friction2d/friction/actions/runs/27543219764/artifacts/7637085319

[irwant]

Lottie masking just applied to one object (circle 1) expected applied for all object in the group

[pgilfernandez]

Lottie masking just applied to one object (circle 1) expected applied for all object in the group

It works for pairs, that is, a mask and an masked object/group.

So you need to arrange them like the following:

• Layer
  • Mask
  • Group
    • circle 1
    • circle 0
    • circle

[pgilfernandez]

I will create a Exporter plugin system for v1.1. That way it will be easier to make exporters. We will use this exporter as a reference on how to make a plugin.

Don't worry about the code, I will adapt it.

Hi @rodlie,

I hope this plugin system supports also importers as I created 2 super handy importers:

• lottie file import into Friction project
• animated SVG file import into Friction project (requested sometimes in the past)

I tried to add as many features as possible, they indeed are not perfect yet but they import most of the features we can expect to use in daily cases. 😄

You can follow these features at:

• Import animated SVG files into Friction
• Import Lottie and dotLottie files into Friction

[BSBMteam]

When I click on the Test Builds, it doesn't exist. I tried clicking on all 3 options (Windows, macOS, Linux). When I clicked on the Windows option, I got this error message

BlobNotFoundThe specified blob does not exist. RequestId:0e6b7d3b-301e-00af-3f48-15e78d000000 Time:2026-07-16T17:29:16.1510152Z

[pgilfernandez]

I think there are new builds... let me look for them tomorrow or you can always browse the "Actions" tab and search for the one with the last title of the newest commit I made...

[pgilfernandez]

Umm, I think they are expired... maybe @rodlie could relaunch the builds again...