Lottie local animation not displaying on web page

Question

I have a simple html do display an animation i made in After Effects, but i can't display the animation when loading it locally (data.json). But if i upload the animation through LottieFiles and use the link generated in my html file, it works. Can someone please explain me why i am not being able to load the animation through my data.json instead from the generated link ?

Bellow i put the code i have so far:

<head>
    <!--  Meta  -->
    <meta charset="UTF-8">
    <title>Bodymovin Demo</title>
    <style>
        body {
            text-align: center;
        }
        h1 {
            margin-top: 2em;
        }
        #bm {
            width: 1000px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <h1>Test Animation</h1>

    <div id="bm"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.9/lottie.js"></script>
    <script>
        var animation = bodymovin.loadAnimation({
            container: document.getElementById('bm'),
            renderer: 'svg',
            loop: true,
            autoplay: true,
            // this way works, but if i put 'data.json' which is on the same directory of this file it doesn't work        
            path: 'https://assets7.lottiefiles.com/packages/lf20_kxQ49M.json'
        });
    </script>
</body>

I also have a link to my 'data.json' file: https://drive.google.com/file/d/1xsikpLLQY-7FMV1_S5VelmB2_85LD-oi/view?usp=sharing

Note that the `` tag does not use and does not need a closing slash and never has in HTML. — Rob, Dec 17 '19 at 15:17
Thanks for noticing, got there from copying to here, fixed but the problem still the same — 31GipsyKing, Dec 17 '19 at 15:29

score 1 · Answer 1 · answered Jan 27 '20 at 18:07

1

Most likely you are getting a CORS error.

For security reasons browsers don't seem to allow you to load JSON files stored on your computer, it will work as long as the .json file is hosted online.

So through lottiefiles as you've done, or on your web hosting.

answered Jan 27 '20 at 18:07

Toby Mardles

85
2
10

Thank you very much for your explanation – 31GipsyKing Feb 14 '20 at 17:37
Lottie actually provides hosting for you .json files as well: https://lottiefiles.com/preview – dnhyde Feb 26 '20 at 12:58

Lottie local animation not displaying on web page

1 Answers1