search

airbnb / lottie-web

Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
MIT License
30.6k stars 2.88k forks source link

Json file not working #659

Closed juanicarmesi closed 7 years ago

juanicarmesi commented 7 years ago

Hi, I exported from AE the json file and its not working, I tried with other json files uploaded as example and they work perfectly in my web.

You can see the file here: http://viim.co/js/hero.json

My AE file: https://www.dropbox.com/s/uxulyyf2acxhemc/hero%20image.aep?dl=0

Thank you for your help!

bodymovin commented 7 years ago

Hi, I've tried it and it seems to be working fine. What is it that you see failing?

juanicarmesi commented 7 years ago

Thanks for your reply, I created a CodePen https://codepen.io/jvelezr/pen/OxQOoB you can see there that when I enter my file in "path" it doesn´t work, but when I use other .json as example (https://labs.nearpod.com/bodymovin/demo/2016/data.json) it does.

What am I doing wrong?

bodymovin commented 7 years ago

you're getting a browser security error: Mixed Content: The page at 'https://codepen.io/jvelezr/pen/OxQOoB' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://viim.co/js/hero.json'. This request has been blocked; the content must be served over HTTPS.

juanicarmesi commented 7 years ago

But the same thing happens when I load everything in localhost. I checked the console and get this:

bodymovin.js:5 Error: attribute width: Expected length, "undefined". SVGRenderer.configAnimation @ bodymovin.js:5 bodymovin.js:5 Error: attribute height: Expected length, "undefined". SVGRenderer.configAnimation @ bodymovin.js:5 bodymovin.js:5 Error: attribute viewBox: Expected number, "0 0 undefined undefi…". SVGRenderer.configAnimation @ bodymovin.js:5

bodymovin commented 7 years ago

Can you try reproducing that error on codepen so I can check it?

juanicarmesi commented 7 years ago

Hi I get a different error when changed the url to https "No 'Access-Control-Allow-Origin' header is present on the requested resource." I updated the codepen.

I can share the folder with the index file, maybe is easier? https://www.dropbox.com/sh/albcxty6ku21jad/AACdVxuutSoowxWL9Omggymga?dl=0

juanicarmesi commented 7 years ago

Hi! I'm so sorry, I had a stupid mistake :) a couple letters misspeled. Thanks for your help and support 🥇

bodymovin commented 7 years ago

Glad it worked :)

RalfZhang commented 6 years ago

@jvelezr Hey, I got the same error like you. Error: <svg> attribute width: Expected length, "undefined". Do you remember what happened? Thank you.

RalfZhang commented 6 years ago

Sorry for bothering. I have found the reason. I replaced path to animationData. XD

janekkkk commented 5 years ago

Should be animationData: animationData.default

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

mdbesoain commented 4 years ago

Should be animationData: animationData.default

See: chenqingspring/vue-lottie#20

This should be marked as the solution.