dotLottie breaks when keyframes (k).to or .ti is null instead `number[]`

[herberthobregon]

Overview

I've encountered an issue where the Lottie animation does not handle to and ti properties correctly when they are set to null in the keyframe definitions. According to the Lottie specification, these properties should be an array of numbers (number[]), but in some instances, they are being set to null, which causes unexpected behavior in the animation playback.

lottie-web works well but @lottiefiles/dotlottie-web doesn't works

Steps to Reproduce:

1. Define a Lottie animation with the following keyframe structure:

{
    "a": 1,
    "k": [
        {
            "i": { "x": 0.833, "y": 0.833 },
            "o": { "x": 0.167, "y": 0.167 },
            "t": 0,
            "s": [1395.5, 100.5, 0],
            "to": null,  // Issue here
            "ti": null   // Issue here
        },
        {
            "i": { "x": 0.833, "y": 0.833 },
            "o": { "x": 0.167, "y": 0.167 },
            "t": 79,
            "s": [1395.5, 100.5, 0],
            "to": [-2.333, 0.667, 0],
            "ti": [2.333, -0.667, 0]
        }
    ]
}

2. Attempt to render the animation in a Lottie-compatible player.
3. Observe the unexpected behavior or failure during playback. Expected Behavior:

The Lottie player should correctly handle the to and ti properties, and if they are set to null, it should default to [0, 0, 0] or apply appropriate fallback behavior, ensuring smooth animation transitions.

Actual Behavior:

When to and ti are set to null, the animation experiences abrupt transitions or fails to render correctly.

Example:

await import("https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-web/+esm").then(({ DotLottie }) => (window.DotLottie = DotLottie));   
this.dotLottieAnimation = new window.DotLottie({
    canvas: this.$lottieCanvas,
    src: "https://github.com/user-attachments/files/16842939/VTSVDMp4ku.json",
    autoplay: true,
    loop: true
});

Download File: Error path: assets.layers.0.ks.p or find "null" in your editor VTSVDMp4ku.json

Environment:

@lottiefiles/dotlottie-web Version: 0.31.1 (https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-web/+esm) Browser/Platform: Chrome 125 OS: MacOS

Possible Solution:

Ensure that the to and ti properties default to an array of zeros [0, 0, 0] when they are set to null, or apply a similar fallback to prevent issues in the animation.

Additional Context:

This issue was observed in an animation JSON file, particularly within the assets.layers.0.ks.p property, where keyframes were defined with to and ti set to null. Changing these properties to an array of numbers resolved the issue.

This issue report should help clearly communicate the problem to the developers maintaining the Lottie project on GitHub.

Labels

• [x] Add the Type: Bug label to this issue.

[theashraf]

@herberthobregon, the dotLottie runtimes use ThorVG as a Lottie renderer. The ThorVG project strictly adheres to the Lottie specifications and focuses on performance and minimizing binary size. Adding fallbacks may negatively impact the rendering engine's binary size. cc @hermet

Please ensure that the file follows the Lottie specifications. Specifically, the ti and to properties should be arrays. You can find more details here: https://lottie.github.io/lottie-spec/specs/properties/#position-keyframe

May I ask which tool you used to generate the following Lottie JSON ?

[herberthobregon]

Thank you very much for your prompt reply. It took me a little more than 1 hour to find this error in the json file.

I downloaded this JSON file from https://lottiefiles.com/ and webpage it worked fine. It even works fine in Lottie player (https://lottiefiles.com/web-player) but with the official library it doesn't work. I don't understand why? lottie player uses the same library.

I guess a lot of files uploaded on lottiefiles.com must have the same problem but the old library supported it and the new one doesn't. They will eventually come to report it or they just won't have the patience I had to find the bug.

[hermet]

@herberthobregon @theashraf Hello, we've tested with more than 20,000 public Lottie resources and have never encountered this usage. I believe this is a rare corner case in practice. Please remove those unnecessary data for now, we will review this from the engine side. Thanks.

[hermet]

@theashraf the fix will be in v0.14.9. Thanks.

[herberthobregon]

Thanks to all! I do my best to catch this error and describe exact error.

I have a little question

lottie-web and dotlottie/lottie-web even if json files, Use the same engine?

Why lottie player can play this animation if use dotlottie/lottie-web as core lib?

[hermet]

Thanks to all! I do my best to catch this error and describe exact error.

I have a little question

lottie-web and dotlottie/lottie-web even if json files, Use the same engine?

Why lottie player can play this animation if use dotlottie/lottie-web as core lib?

@herberthobregon dotlottie-web / lottie-web use different engines. that's why.

[theashraf]

@herberthobregon fixed in dotlottie-web v0.35.0