Tools for Designers to Add Slots (sid) in Lottie Files

[manishagarwal23]

Hi

the Lottie files generated using the After Effects bodymovin plugin don’t include slotId or sid. Do the provided examples still work if they do not contain a sid but say nm ? For example, in LottieExtension.cpp
, the code loads slot4.json:

//slot (overriden default slot)
{
    slot4 = std::unique_ptr<tvg::LottieAnimation>(tvg::LottieAnimation::gen());
    auto picture = slot4->picture();
    if (!tvgexam::verify(picture->load(EXAMPLE_DIR"/lottie/extensions/slot4.json"))) return false;

    const char* slotJson = R"({"bg_color":{"p":{"a":0,"k":[1,0.8196,0.2275]}},"check_color":{"p":{"a":0,"k":[0.0078,0.0078,0.0078]}}})";
    slotId4 = slot4->gen(slotJson);
    if (!tvgexam::verify(slot4->apply(slotId4))) return false;

    sizing(picture, 4);
    canvas->push(picture);
}

Here, slot4.json (from resources/extensions/slot4.json
) is being used which is a specifc slot_id

Is there any tool available for designers to convert normal lottie files into slotted lotties ?

[manishagarwal23]

@hermet can you guide please

[hermet]

+ @tinyjin

[hermet]

@manishagarwal23

1. LottieCreator is the official design tool in supporting "sid" https://www.youtube.com/watch?v=QV_4CeIOaik&t=5s

2. You can manually add sid in your lottie asset: Please refer "step1" and "step2" in this page.

How about using dotlottie-player?

[manishagarwal23]

Actually, we’ve fixed Lottie JSON as the default for now, so switching to another format isn’t possible. Our pipeline currently generates JSON files, and After Effects Bodymovin only outputs JSON. Because of this, we are now forced to use a single large JSON that covers all use cases instead of handling them through slots.

How are slots typically generated today? Are JSONs being manually edited? That seems like a fairly error-prone approach. I was hoping to rely on a script to manage this, unless Bodymovin already provides such a tool.

[tinyjin]

Hello @manishagarwal23,

Just to clarify, sid is required, not nm. Without an explicit sid, the slot will not work.

Unfortunately, as far as I know, there seems no official Lottie slot converter available without coding stuffs when we use lottie+json file type.

Instead, you can simply add the sid directly in the JSON:

If you have a property you want to control with a slot, you can make it slotable by adding a "sid" field at the same JSON depth as that property. (Also you can refer to the document that Hermet has shared above)

I understand what you're concerned about. After you modify JSON, to make sure the file is changed correctly, you can check with Lottie Validator(https://lottie.github.io/validator).