Lottie-web: Multiple SVG errors in JSON Error: Invalid value for <svg> attribute width="undefined"

[cmporter83]

The plugin is great. We have created 9 different animations, with 6 of them working flawlessly. The final 3 all seem to have issues. One renders alright, but certain elements are out of place and not animated. Two others just throw console errors like crazy. I'd be happy to send the AE file, however would prefer not to make it publicly available. Is there an email I can send it to for help?

[Error] Error: Invalid value for
configAnimation (Anonymous Script 2 (line 4437))
configAnimation (Anonymous Script 2 (line 7517))
setParams (Anonymous Script 2 (line 7360))
loadAnimation (Anonymous Script 2 (line 7136))
loadAnimation (Anonymous Script 2 (line 12441:1191))
(anonymous function) (Anonymous Script 3 (line 91))
each (Anonymous Script 1 (line 368))
(anonymous function) (Anonymous Script 3 (line 90))
mightThrow (Anonymous Script 1 (line 3570))
(anonymous function) (Anonymous Script 1 (line 3638))
[Error] Error: Invalid value for
configAnimation (Anonymous Script 2 (line 4438))
configAnimation (Anonymous Script 2 (line 7517))
setParams (Anonymous Script 2 (line 7360))
loadAnimation (Anonymous Script 2 (line 7136))
loadAnimation (Anonymous Script 2 (line 12441:1191))
(anonymous function) (Anonymous Script 3 (line 91))
each (Anonymous Script 1 (line 368))
(anonymous function) (Anonymous Script 3 (line 90))
mightThrow (Anonymous Script 1 (line 3570))
(anonymous function) (Anonymous Script 1 (line 3638))
[Error] Error: Invalid value for attribute width="undefined"
configAnimation (Anonymous Script 2 (line 4461))
configAnimation (Anonymous Script 2 (line 7517))
setParams (Anonymous Script 2 (line 7360))
loadAnimation (Anonymous Script 2 (line 7136))
loadAnimation (Anonymous Script 2 (line 12441:1191))
(anonymous function) (Anonymous Script 3 (line 91))
each (Anonymous Script 1 (line 368))
(anonymous function) (Anonymous Script 3 (line 90))
mightThrow (Anonymous Script 1 (line 3570))
(anonymous function) (Anonymous Script 1 (line 3638))
[Error] Error: Invalid value for attribute height="undefined"
configAnimation (Anonymous Script 2 (line 4462))
configAnimation (Anonymous Script 2 (line 7517))
setParams (Anonymous Script 2 (line 7360))
loadAnimation (Anonymous Script 2 (line 7136))
loadAnimation (Anonymous Script 2 (line 12441:1191))
(anonymous function) (Anonymous Script 3 (line 91))
each (Anonymous Script 1 (line 368))
(anonymous function) (Anonymous Script 3 (line 90))
mightThrow (Anonymous Script 1 (line 3570))
(anonymous function) (Anonymous Script 1 (line 3638))
[Error] TypeError: undefined is not an object (evaluating 'animData.layers.length')
(anonymous function) (Anonymous Script 1 (line 4477))

[bodymovin]

that looks like an expression issue
you can email me the project to [email protected] and I'll check it

[cmporter83]

File sent. Thank you.

[Tswan]

@bodymovin I seem to be having a similar issue, and I've attached a screenshot of my console logs. I was wondering what the solution for this was?

!!! SORRY, All I had to do was change the attribute being defined from animationData to path

[bodymovin]

@Tswan nice! :)

[giacomoalonzi]

I have the same issue like @Tswan.
This is my code

import bodymovin from 'bodymovin'
export const heroHomeSvgAnimation = () => {
  const animationData = require('./json/item-man-home-hero.json')
  const animationItem = bodymovin.loadAnimation({
    wrapper: document.getElementById('svgItemManHero'),
    animType: 'svg',
    loop: true,
    animationData
  })
}

where animationData is this file converted in simple json file.

any hint?

i've tried to changeanimationData to path and this is the result:

Thank you so much!

[bodymovin]

@giacomoalonzi can you share a link where it fails so I can check the error?

[Tswan]

@giacomoalonzi in my case it required me to write a path to the json file. It could be absolute or relative, but the way I did it so the script started from the root directory was:
var myBodyMovinVariable = bodymovin.loadAnimation({ container: document.getElementById('example'), // the dom element renderer: 'svg', loop: false, autoplay: false, path: 'inFolderLocatedInMyRootDirectory/js/data.json' //Could be 'js/data.json' if the js folder in in the root });

I'm thinking this may be related to writing the correct path?

[janekkkk]

Should be animationData: animationData.default

See: https://github.com/chenqingspring/vue-lottie/issues/20

[robleds]

Works for me:

const animationData = require('./box.json')
const defaultOptions = { loop: true, autoplay: true, animationData: animationData, rendererSettings: { preserveAspectRatio: 'xMidYMid slice' } }
return ( <Lottie options={defaultOptions} height={400} width={400} /> )

[facku]

Should be animationData: animationData.default

See: chenqingspring/vue-lottie#20

Works for me! But how you know that's are the solution?