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

[pgilfernandez]

Indeed, I didn't mean this was going to be for 1.0 but 1.1 if you will consider it as a good addition.

In the meantime, anybody can play with the builds created in this PR and start creating things if the resulting lotties are good enough for them 😉

I will try spreading the news in the issues and discussions mentioned before in order to get some feedback.

[rodlie]

I tested the Linux binary, a basic animation works (only tested preview) 👍

There are some changes I would do, but that's not important. Get feedback and improve the feature(s) (if needed), then we can figure out how we want this included in Friction.

[pgilfernandez]

Yes, there are things I would do in a different way if integrated in Friction, most of them are UX related, dialogs, options and so, but it's not time now for that, let's see if some Lottie eagers play with the builds

[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