Lottie-web: How to use data.json file instead of using animationData in demo.html file?

Created on 9 Apr 2018 · 3Comments · Source: airbnb/lottie-web

My HTML file contains :

<body>
<script src="js/lottie.js"></script>

<div id="lottie"></div>

<script>

    var params = {
        container: document.getElementById('lottie'),
        renderer: 'svg',
        loop: true,
        autoplay: true,
        // animationData: JSON.parse('js/data.json')
        // animationData: animationData
        path: 'js/data.json'
    };

    var anim;

    anim = lottie.loadAnimation(params);

</script>
</body>

and I have 2 files in js folder : lottie.js and data.json.

But this code is giving me an error:

lottie.js:5 Failed to load file:///home/auxesis04/Desktop/animation/Web_animation_Trial/js/data.json: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Please Help

Source

ritsraghani

Most helpful comment

you can load the json as a js object and pass the value as animationData instead of path

bodymovin on 22 Nov 2019

👍2 ❤1

All 3 comments

Hello @ritsraghani!
Are you running your HTML file on a web server?
If you are running it through __file://__ you don't have permission to load a __json__ file through a __AJAX__ request, which lottie does
If you want to load a __json__ file you'll need to run the html file on a server.

I'd recommend mamp for a easy to use and simple local server