Is this still supported?

Question

Is this still supported?

Opened this issue 4 years ago · 25 comments

When I tried with a new json file from AE I get the following error.

TypeError: Cannot read property '0' of undefined
    at buildPath (/home/thomas/node-playground/node_modules/bodymovin-to-smil/src/property.js:462:40)
    at createAnimatorObject (/home/thomas/node-playground/node_modules/bodymovin-to-smil/src/property.js:410:19)
    at Object.createAnimatedProperty (/home/thomas/node-playground/node_modules/bodymovin-to-smil/src/property.js:48:21)
    at createTransformGroup (/home/thomas/node-playground/node_modules/bodymovin-to-smil/src/helpers/transform/createTransformGroup.js:79:33)
    at buildNewPath (/home/thomas/node-playground/node_modules/bodymovin-to-smil/src/layers/shape/drawable.js:541:39)
    at Object.exportDrawables (/home/thomas/node-playground/node_modules/bodymovin-to-smil/src/layers/shape/drawable.js:717:15)
    at Object.createNodeInstance (/home/thomas/node-playground/node_modules/bodymovin-to-smil/src/layers/shape/shape.js:23:33)
    at Object.exportNode (/home/thomas/node-playground/node_modules/bodymovin-to-smil/src/layers/layer.js:39:9)
    at Object.createNodeInstance (/home/thomas/node-playground/node_modules/bodymovin-to-smil/src/layers/composition.js:35:38)
    at Object.exportNode (/home/thomas/node-playground/node_modules/bodymovin-to-smil/src/layers/layer.js:39:9)
TypeError: Cannot read property '0' of undefined
    at buildPath (/home/thomas/node-playground/node_modules/bodymovin-to-smil/src/property.js:462:40)
    at createAnimatorObject (/home/thomas/node-playground/node_modules/bodymovin-to-smil/src/property.js:410:19)
    at Object.createAnimatedProperty (/home/thomas/node-playground/node_modules/bodymovin-to-smil/src/property.js:48:21)
    at createTransformGroup (/home/thomas/node-playground/node_modules/bodymovin-to-smil/src/helpers/transform/createTransformGroup.js:79:33)
    at buildNewPath (/home/thomas/node-playground/node_modules/bodymovin-to-smil/src/layers/shape/drawable.js:541:39)
    at Object.exportDrawables (/home/thomas/node-playground/node_modules/bodymovin-to-smil/src/layers/shape/drawable.js:717:15)
    at Object.createNodeInstance (/home/thomas/node-playground/node_modules/bodymovin-to-smil/src/layers/shape/shape.js:23:33)
    at Object.exportNode (/home/thomas/node-playground/node_modules/bodymovin-to-smil/src/layers/layer.js:39:9)
    at Object.createNodeInstance (/home/thomas/node-playground/node_modules/bodymovin-to-smil/src/layers/composition.js:35:38)
    at Object.exportNode (/home/thomas/node-playground/node_modules/bodymovin-to-smil/src/layers/layer.js:39:9)

here is the json file used. animation.zip

Answer 1 · 2020-08-18T11:05:47.000Z

it's not actively supported.
I'll try to update it at some point, as soon as I have time.
Perhaps if you export the animation with the old json format, it works, but I can't be sure.

Answer 2 · 2021-04-30T17:20:35.000Z

@bodymovin Hey just wanted to let you know we dropped IE11 support at Airbnb and are attempting to use this as SMIL is reasonably supported on all browsers and we've been able to test against some animations that work quite well.

Do you have any idea of the level of effort that would be required to resolve this issue? We believe that not needing the lottie runtime and some minimal normalization unlocks lottie on web/mobile-web in a performant manner given recent changes to GPU accelerate SVG's as well as the excellent compression of the source files. We have been able to save in older formats to get around it for the most part, but it definitely presents challenges.

Answer 3 · 2021-05-09T11:44:17.000Z

@calinoracation hi, I've done some updates in the last couple of days and most of what was working before should be working now plus a couple more fixes in the process.
If you happen to give it a try, can you let me know if it works?

Answer 4 · 2021-05-10T17:27:06.000Z

@bodymovin I will absolutely give it a try, thanks so much! Really exciting to see this progress.

Answer 5 · 2021-05-20T18:24:29.000Z

@bodymovin Sorry for the delay, it's been so busy! We're working on trying this out locally as a new version isn't published just yet.

Answer 6 · 2021-05-21T20:15:27.000Z

@bodymovin We didn't have much luck with the new version yet, it didn't fail but the animation looked incorrect. Will provide additional details soon, would it be helpful to share the conversion code we're using to turn the SMIL into a toggleable react component?

Answer 7 · 2021-05-21T20:24:50.000Z

yes please. And if possible, can you share the animation?

Answer 8 · 2021-05-26T23:06:58.000Z

I have shared a zip file with the conversion code and also a json file that didn't convert the animation correctly. please reach out if you have any questions. Thank you!
lottie_files.zip

Answer 9 · 2021-05-26T23:40:51.000Z

@sssomnus would you mind sharing the .aep as well?

Answer 10 · 2021-05-26T23:42:04.000Z

what .aep file are you referring to?

Answer 11 · 2021-05-26T23:47:35.000Z

@sssomnus do you have the original animation that was exported to the json?

Answer 12 · 2021-05-26T23:49:05.000Z

the original animation is a svg file, do you need it?

Answer 13 · 2021-05-26T23:51:58.000Z

@sssomnus yes please. Out of curiosity how did you convert the animated svg to a json?

Answer 14 · 2021-05-26T23:55:17.000Z

lottie_files 2.zip
here you go, the svg file is included, I am not sure how to convert svg to json file on top of my head

Answer 15 · 2021-05-27T00:00:38.000Z

thanks @sssomnus @calinoracation , if you happen to have the After Effects project (.aep), that would be very helpful. In the meantime I'll see what I can find out with this files.

Answer 16 · 2021-05-27T02:24:36.000Z

@sssomnus @calinoracation it looks like this animation has been exported with the old format, that's why it's not working well. Have you tried exporting it with a newer version of bodymovin?

Answer 17 · 2021-06-02T17:25:29.000Z

We have! Let me try to get you the newer format one, we must of sent the wrong version over.

Answer 18 · 2021-06-02T20:37:55.000Z

lottie.zip
I have attached two versions, both new and old format, could you try and see if it works?

Answer 19 · 2021-06-02T21:28:00.000Z

@sssomnus @calinoracation both files seem to be equal, and they are exported with version 5.1.15 of bodymovin, which is the same as the previous shared file.
Is that the version you're all using?

Answer 20 · 2021-07-30T23:24:45.000Z

@bodymovin I've attached 2 new ones, the changes you made didn't quite fix it for us.

Here's a bit of debug output I made from adding some try/catches, it will work if I continue and don't export the layers, but it doesn't look correct.

lottie new format.zip

motion.icon.export.mp4

{
  targetName: '_R_G_L_0_G_L_1_G_L_1_G',
  propertyType: 'position',
  keyframes: undefined,
  timeOffset: -24
}
Trace
    at Object.createAnimatedProperty (/Users/callie_riggins/projects/bodymovin-to-smil/src/property.js:36:11)
    at createTransformGroup (/Users/callie_riggins/projects/bodymovin-to-smil/src/helpers/transform/createTransformGroup.js:79:33)
    at Object.exportNode (/Users/callie_riggins/projects/bodymovin-to-smil/src/layers/layer.js:56:25)
    at Object.createNodeInstance (/Users/callie_riggins/projects/bodymovin-to-smil/src/layers/composition.js:36:39)
    at Object.exportNode (/Users/callie_riggins/projects/bodymovin-to-smil/src/layers/layer.js:44:9)
    at Object.createNodeInstance (/Users/callie_riggins/projects/bodymovin-to-smil/src/layers/composition.js:36:39)
    at Object.exportNode (/Users/callie_riggins/projects/bodymovin-to-smil/src/layers/layer.js:44:9)
    at Object.createNodeInstance (/Users/callie_riggins/projects/bodymovin-to-smil/src/layers/composition.js:36:39)
    at Object.exportNode (/Users/callie_riggins/projects/bodymovin-to-smil/src/layers/layer.js:44:9)
    at /Users/callie_riggins/projects/bodymovin-to-smil/src/svg/svg.js:87:41
Error with group: _R_G_L_0_G_L_1_G
{
  layers: [
    {
      setDrawables: [Function: setDrawables],
      setTransforms: [Function: setTransforms],
      setTrimPath: [Function: setTrimPath],
      processData: [Function: processData],
      createNodeInstance: [Function: createNodeInstance],
      setTimeOffset: [Function: setTimeOffset],
      setWorkAreaOffset: [Function: setWorkAreaOffset],
      exportNode: [Function: exportNode],
      getMasks: [Function: getMasks],
      transform: [Function: transform],
      buildParenting: [Function: buildParenting],
      setSiblings: [Function: setSiblings]
    },
    {
      createNodeInstance: [Function: createNodeInstance],
      processData: [Function: processData],
      setTimeOffset: [Function: setTimeOffset],
      setWorkAreaOffset: [Function: setWorkAreaOffset],
      exportNode: [Function: exportNode],
      getMasks: [Function: getMasks],
      transform: [Function: transform],
      buildParenting: [Function: buildParenting],
      setSiblings: [Function: setSiblings]
    },
    {
      setDrawables: [Function: setDrawables],
      setTransforms: [Function: setTransforms],
      setTrimPath: [Function: setTrimPath],
      processData: [Function: processData],
      createNodeInstance: [Function: createNodeInstance],
      setTimeOffset: [Function: setTimeOffset],
      setWorkAreaOffset: [Function: setWorkAreaOffset],
      exportNode: [Function: exportNode],
      getMasks: [Function: getMasks],
      transform: [Function: transform],
      buildParenting: [Function: buildParenting],
      setSiblings: [Function: setSiblings]
    },
    {
      setDrawables: [Function: setDrawables],
      setTransforms: [Function: setTransforms],
      setTrimPath: [Function: setTrimPath],
      processData: [Function: processData],
      createNodeInstance: [Function: createNodeInstance],
      setTimeOffset: [Function: setTimeOffset],
      setWorkAreaOffset: [Function: setWorkAreaOffset],
      exportNode: [Function: exportNode],
      getMasks: [Function: getMasks],
      transform: [Function: transform],
      buildParenting: [Function: buildParenting],
      setSiblings: [Function: setSiblings]
    },
    {
      setDrawables: [Function: setDrawables],
      setTransforms: [Function: setTransforms],
      setTrimPath: [Function: setTrimPath],
      processData: [Function: processData],
      createNodeInstance: [Function: createNodeInstance],
      setTimeOffset: [Function: setTimeOffset],
      setWorkAreaOffset: [Function: setWorkAreaOffset],
      exportNode: [Function: exportNode],
      getMasks: [Function: getMasks],
      transform: [Function: transform],
      buildParenting: [Function: buildParenting],
      setSiblings: [Function: setSiblings]
    },
    {
      setDrawables: [Function: setDrawables],
      setTransforms: [Function: setTransforms],
      setTrimPath: [Function: setTrimPath],
      processData: [Function: processData],
      createNodeInstance: [Function: createNodeInstance],
      setTimeOffset: [Function: setTimeOffset],
      setWorkAreaOffset: [Function: setWorkAreaOffset],
      exportNode: [Function: exportNode],
      getMasks: [Function: getMasks],
      transform: [Function: transform],
      buildParenting: [Function: buildParenting],
      setSiblings: [Function: setSiblings]
    },
    {
      setDrawables: [Function: setDrawables],
      setTransforms: [Function: setTransforms],
      setTrimPath: [Function: setTrimPath],
      processData: [Function: processData],
      createNodeInstance: [Function: createNodeInstance],
      setTimeOffset: [Function: setTimeOffset],
      setWorkAreaOffset: [Function: setWorkAreaOffset],
      exportNode: [Function: exportNode],
      getMasks: [Function: getMasks],
      transform: [Function: transform],
      buildParenting: [Function: buildParenting],
      setSiblings: [Function: setSiblings]
    },
    {
      setDrawables: [Function: setDrawables],
      setTransforms: [Function: setTransforms],
      setTrimPath: [Function: setTrimPath],
      processData: [Function: processData],
      createNodeInstance: [Function: createNodeInstance],
      setTimeOffset: [Function: setTimeOffset],
      setWorkAreaOffset: [Function: setWorkAreaOffset],
      exportNode: [Function: exportNode],
      getMasks: [Function: getMasks],
      transform: [Function: transform],
      buildParenting: [Function: buildParenting],
      setSiblings: [Function: setSiblings]
    },
    {
      setDrawables: [Function: setDrawables],
      setTransforms: [Function: setTransforms],
      setTrimPath: [Function: setTrimPath],
      processData: [Function: processData],
      createNodeInstance: [Function: createNodeInstance],
      setTimeOffset: [Function: setTimeOffset],
      setWorkAreaOffset: [Function: setWorkAreaOffset],
      exportNode: [Function: exportNode],
      getMasks: [Function: getMasks],
      transform: [Function: transform],
      buildParenting: [Function: buildParenting],
      setSiblings: [Function: setSiblings]
    },
    {
      setDrawables: [Function: setDrawables],
      setTransforms: [Function: setTransforms],
      setTrimPath: [Function: setTrimPath],
      processData: [Function: processData],
      createNodeInstance: [Function: createNodeInstance],
      setTimeOffset: [Function: setTimeOffset],
      setWorkAreaOffset: [Function: setWorkAreaOffset],
      exportNode: [Function: exportNode],
      getMasks: [Function: getMasks],
      transform: [Function: transform],
      buildParenting: [Function: buildParenting],
      setSiblings: [Function: setSiblings]
    },
    {
      setDrawables: [Function: setDrawables],
      setTransforms: [Function: setTransforms],
      setTrimPath: [Function: setTrimPath],
      processData: [Function: processData],
      createNodeInstance: [Function: createNodeInstance],
      setTimeOffset: [Function: setTimeOffset],
      setWorkAreaOffset: [Function: setWorkAreaOffset],
      exportNode: [Function: exportNode],
      getMasks: [Function: getMasks],
      transform: [Function: transform],
      buildParenting: [Function: buildParenting],
      setSiblings: [Function: setSiblings]
    },
    {
      setDrawables: [Function: setDrawables],
      setTransforms: [Function: setTransforms],
      setTrimPath: [Function: setTrimPath],
      processData: [Function: processData],
      createNodeInstance: [Function: createNodeInstance],
      setTimeOffset: [Function: setTimeOffset],
      setWorkAreaOffset: [Function: setWorkAreaOffset],
      exportNode: [Function: exportNode],
      getMasks: [Function: getMasks],
      transform: [Function: transform],
      buildParenting: [Function: buildParenting],
      setSiblings: [Function: setSiblings]
    },
    {
      setDrawables: [Function: setDrawables],
      setTransforms: [Function: setTransforms],
      setTrimPath: [Function: setTrimPath],
      processData: [Function: processData],
      createNodeInstance: [Function: createNodeInstance],
      setTimeOffset: [Function: setTimeOffset],
      setWorkAreaOffset: [Function: setWorkAreaOffset],
      exportNode: [Function: exportNode],
      getMasks: [Function: getMasks],
      transform: [Function: transform],
      buildParenting: [Function: buildParenting],
      setSiblings: [Function: setSiblings]
    },
    {
      setDrawables: [Function: setDrawables],
      setTransforms: [Function: setTransforms],
      setTrimPath: [Function: setTrimPath],
      processData: [Function: processData],
      createNodeInstance: [Function: createNodeInstance],
      setTimeOffset: [Function: setTimeOffset],
      setWorkAreaOffset: [Function: setWorkAreaOffset],
      exportNode: [Function: exportNode],
      getMasks: [Function: getMasks],
      transform: [Function: transform],
      buildParenting: [Function: buildParenting],
      setSiblings: [Function: setSiblings]
    },
    {
      setDrawables: [Function: setDrawables],
      setTransforms: [Function: setTransforms],
      setTrimPath: [Function: setTrimPath],
      processData: [Function: processData],
      createNodeInstance: [Function: createNodeInstance],
      setTimeOffset: [Function: setTimeOffset],
      setWorkAreaOffset: [Function: setWorkAreaOffset],
      exportNode: [Function: exportNode],
      getMasks: [Function: getMasks],
      transform: [Function: transform],
      buildParenting: [Function: buildParenting],
      setSiblings: [Function: setSiblings]
    },
    {
      setDrawables: [Function: setDrawables],
      setTransforms: [Function: setTransforms],
      setTrimPath: [Function: setTrimPath],
      processData: [Function: processData],
      createNodeInstance: [Function: createNodeInstance],
      setTimeOffset: [Function: setTimeOffset],
      setWorkAreaOffset: [Function: setWorkAreaOffset],
      exportNode: [Function: exportNode],
      getMasks: [Function: getMasks],
      transform: [Function: transform],
      buildParenting: [Function: buildParenting],
      setSiblings: [Function: setSiblings]
    }
  ],
  layer: {
    createNodeInstance: [Function: createNodeInstance],
    processData: [Function: processData],
    setTimeOffset: [Function: setTimeOffset],
    setWorkAreaOffset: [Function: setWorkAreaOffset],
    exportNode: [Function: exportNode],
    getMasks: [Function: getMasks],
    transform: [Function: transform],
    buildParenting: [Function: buildParenting],
    setSiblings: [Function: setSiblings]
  },
  grouper: { g: { _attr: [Object] } }
}
{
  targetName: '_R_G_L_0_G_L_0_G',
  propertyType: 'position',
  keyframes: undefined,
  timeOffset: -24
}
Trace
    at Object.createAnimatedProperty (/Users/callie_riggins/projects/bodymovin-to-smil/src/property.js:36:11)
    at createTransformGroup (/Users/callie_riggins/projects/bodymovin-to-smil/src/helpers/transform/createTransformGroup.js:79:33)
    at Object.exportNode (/Users/callie_riggins/projects/bodymovin-to-smil/src/layers/layer.js:56:25)
    at Object.createNodeInstance (/Users/callie_riggins/projects/bodymovin-to-smil/src/layers/composition.js:36:39)
    at Object.exportNode (/Users/callie_riggins/projects/bodymovin-to-smil/src/layers/layer.js:44:9)
    at Object.createNodeInstance (/Users/callie_riggins/projects/bodymovin-to-smil/src/layers/composition.js:36:39)
    at Object.exportNode (/Users/callie_riggins/projects/bodymovin-to-smil/src/layers/layer.js:44:9)
    at /Users/callie_riggins/projects/bodymovin-to-smil/src/svg/svg.js:87:41
    at new Promise (<anonymous>)
    at exportNode (/Users/callie_riggins/projects/bodymovin-to-smil/src/svg/svg.js:81:17)
Error with group: _R_G_L_0_G
{
  layers: [
    {
      setDrawables: [Function: setDrawables],
      setTransforms: [Function: setTransforms],
      setTrimPath: [Function: setTrimPath],
      processData: [Function: processData],
      createNodeInstance: [Function: createNodeInstance],
      setTimeOffset: [Function: setTimeOffset],
      setWorkAreaOffset: [Function: setWorkAreaOffset],
      exportNode: [Function: exportNode],
      getMasks: [Function: getMasks],
      transform: [Function: transform],
      buildParenting: [Function: buildParenting],
      setSiblings: [Function: setSiblings]
    },
    {
      createNodeInstance: [Function: createNodeInstance],
      processData: [Function: processData],
      setTimeOffset: [Function: setTimeOffset],
      setWorkAreaOffset: [Function: setWorkAreaOffset],
      exportNode: [Function: exportNode],
      getMasks: [Function: getMasks],
      transform: [Function: transform],
      buildParenting: [Function: buildParenting],
      setSiblings: [Function: setSiblings]
    }
  ],
  layer: {
    setDrawables: [Function: setDrawables],
    setTransforms: [Function: setTransforms],
    setTrimPath: [Function: setTrimPath],
    processData: [Function: processData],
    createNodeInstance: [Function: createNodeInstance],
    setTimeOffset: [Function: setTimeOffset],
    setWorkAreaOffset: [Function: setWorkAreaOffset],
    exportNode: [Function: exportNode],
    getMasks: [Function: getMasks],
    transform: [Function: transform],
    buildParenting: [Function: buildParenting],
    setSiblings: [Function: setSiblings]
  },
  grouper: { g: [ [Object], [Object] ] }
}

Answer 21 · 2021-07-31T21:06:09.000Z

@calinoracation hi, would you mind sharing the .aep of the "second source.json" file?

Answer 22 · 2021-08-03T17:03:14.000Z

@bodymovin Here's the aep for it.

second source aep.zip

Answer 23 · 2021-08-20T04:55:29.000Z

@bodymovin just checking in if you had an update on this issue?

Answer 24 · 2021-08-27T00:21:05.000Z

@trevcodesjs @calinoracation I fixed several issues from your project and many animations are working now.
Unfortunately time remapping is not supported, and it would be pretty hard to support, so some of them still don't work.
How are you using the library? Via npm, or the bodymovin build?

Answer 25 · 2021-08-31T19:34:36.000Z

We use npm primarily. We're looking forward to giving this a shot, thanks so much for the fixes!