Is this still supported? #3

thomasgauthier · 2020-08-14T22:07:11Z

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

The text was updated successfully, but these errors were encountered:

bodymovin · 2020-08-18T11:05:47Z

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.

calinoracation · 2021-04-30T17:20:35Z

@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.

bodymovin · 2021-05-09T11:44:17Z

@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?

calinoracation · 2021-05-10T17:27:06Z

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

calinoracation · 2021-05-20T18:24:29Z

@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.

calinoracation · 2021-05-21T20:15:27Z

@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?

bodymovin · 2021-05-21T20:24:50Z

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

sssomnus · 2021-05-26T23:06:58Z

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

bodymovin · 2021-05-26T23:40:51Z

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

sssomnus · 2021-05-26T23:42:04Z

what .aep file are you referring to?

bodymovin · 2021-05-26T23:47:35Z

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

sssomnus · 2021-05-26T23:49:05Z

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

bodymovin · 2021-05-26T23:51:58Z

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

sssomnus · 2021-05-26T23:55:17Z

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

bodymovin · 2021-05-27T00:00:38Z

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.

bodymovin · 2021-05-27T02:24:36Z

@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?

calinoracation · 2021-06-02T17:25:29Z

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

sssomnus · 2021-06-02T20:37:55Z

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

bodymovin · 2021-06-02T21:28:00Z

@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?

calinoracation · 2021-07-30T23:24:45Z

@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] ] }
}

bodymovin · 2021-07-31T21:06:09Z

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

calinoracation · 2021-08-03T17:03:14Z

@bodymovin Here's the aep for it.

second source aep.zip

trevcodesjs · 2021-08-20T04:55:29Z

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

bodymovin · 2021-08-27T00:21:05Z

@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?

calinoracation · 2021-08-31T19:34:36Z

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Is this still supported? #3

Is this still supported? #3

thomasgauthier commented Aug 14, 2020

bodymovin commented Aug 18, 2020

calinoracation commented Apr 30, 2021

bodymovin commented May 9, 2021

calinoracation commented May 10, 2021

calinoracation commented May 20, 2021

calinoracation commented May 21, 2021 •

edited

Loading

bodymovin commented May 21, 2021

sssomnus commented May 26, 2021

bodymovin commented May 26, 2021

sssomnus commented May 26, 2021

bodymovin commented May 26, 2021

sssomnus commented May 26, 2021

bodymovin commented May 26, 2021

sssomnus commented May 26, 2021

bodymovin commented May 27, 2021

bodymovin commented May 27, 2021

calinoracation commented Jun 2, 2021

sssomnus commented Jun 2, 2021

bodymovin commented Jun 2, 2021

calinoracation commented Jul 30, 2021 •

edited

Loading

bodymovin commented Jul 31, 2021

calinoracation commented Aug 3, 2021

trevcodesjs commented Aug 20, 2021

bodymovin commented Aug 27, 2021

calinoracation commented Aug 31, 2021

Is this still supported? #3

Is this still supported? #3

Comments

thomasgauthier commented Aug 14, 2020

bodymovin commented Aug 18, 2020

calinoracation commented Apr 30, 2021

bodymovin commented May 9, 2021

calinoracation commented May 10, 2021

calinoracation commented May 20, 2021

calinoracation commented May 21, 2021 • edited Loading

bodymovin commented May 21, 2021

sssomnus commented May 26, 2021

bodymovin commented May 26, 2021

sssomnus commented May 26, 2021

bodymovin commented May 26, 2021

sssomnus commented May 26, 2021

bodymovin commented May 26, 2021

sssomnus commented May 26, 2021

bodymovin commented May 27, 2021

bodymovin commented May 27, 2021

calinoracation commented Jun 2, 2021

sssomnus commented Jun 2, 2021

bodymovin commented Jun 2, 2021

calinoracation commented Jul 30, 2021 • edited Loading

bodymovin commented Jul 31, 2021

calinoracation commented Aug 3, 2021

trevcodesjs commented Aug 20, 2021

bodymovin commented Aug 27, 2021

calinoracation commented Aug 31, 2021

calinoracation commented May 21, 2021 •

edited

Loading

calinoracation commented Jul 30, 2021 •

edited

Loading