search

bodymovin / bodymovin-to-smil

bodymovin to smil
MIT License
39 stars 7 forks source link

Is this still supported? #3

Open thomasgauthier opened 4 years ago

thomasgauthier commented 4 years ago

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

bodymovin commented 4 years ago

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 commented 3 years ago

@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 commented 3 years ago

@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 commented 3 years ago

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

calinoracation commented 3 years ago

@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 commented 3 years ago

@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 commented 3 years ago

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

sssomnus commented 3 years ago

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 commented 3 years ago

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

sssomnus commented 3 years ago

what .aep file are you referring to?

bodymovin commented 3 years ago

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

sssomnus commented 3 years ago

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

bodymovin commented 3 years ago

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

sssomnus commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

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

sssomnus commented 3 years ago

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

bodymovin commented 3 years ago

@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 commented 3 years ago

@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

https://user-images.githubusercontent.com/23196205/127720709-132c7e0d-d953-47dc-b7ea-a2e69132224f.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 commented 3 years ago

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

calinoracation commented 3 years ago

@bodymovin Here's the aep for it.

second source aep.zip

trevcodesjs commented 3 years ago

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

bodymovin commented 3 years ago

@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 commented 3 years ago

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