Bodymovin.js not working - animation is not rendering

Question

I am trying to render after effects animations on browser using Bodymovin. I have tried the example from docs but it is not working. It is not displaying the animation. I am trying the example from docs

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

<!-- Scripts -->

<script src="./bodymovin.js"></script>
<script>
var animation = bodymovin.loadAnimation({
    container: document.getElementById('bm'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    // path: 'https://raw.githubusercontent.com/airbnb/lottie-web/master/demo/bodymovin/data.json'
    path: 'data.json'
})
</script>

</body>
</html>

Do you have any code? I have no idea what you are talking about. — Get Off My Lawn, Jul 03 '18 at 18:20

score 3 · Answer 1 · answered Jul 08 '18 at 18:09

Make sure you are importing the files cause I was getting that error too. I'm sending you my code in order for your page to run, I'm using react but you will get the concept, just change your json file name mine is data.

import React, { Component } from 'react';
import './Cool.css';
import data from './data.json';
import ReactBodymovin from 'react-bodymovin';

class AventadorPage extends Component {
render() {

    const bodymovinOptions = {
        loop: 1,
        autoplay: true,
        prerender: true,
        animationData: data,
    }

    return (
        <div className="main-container">
            <div className="animation">
                <ReactBodymovin options={bodymovinOptions} />
            </div>

            <div>
                <h1 className="title">A V E N T A D O R</h1>
            </div>
        </div>
    );
}
}

export default AventadorPage;

score 1 · Accepted Answer · answered Nov 01 '20 at 17:38

It has been almost 2 years since I have asked the question. few things have changed apparently. Instead of bodymovin, now we have to import lottie. It fixed the issue of bodymovin not recognized.

data.json was a local file. and I was running index.html directly by double-clicking. which was raising CORS issues.

To fix CORS, path needs to be an accessible URL, or you need to run it on localhost. And that's all. it should fix the issue.

var animation = bodymovin.loadAnimation({
  container: document.getElementById('bm'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'https://raw.githubusercontent.com/airbnb/lottie-web/master/demo/navidad/data.json'
})

<html>

<body>
  <div id="bm"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.3/lottie.min.js" integrity="sha512-35O/v2b9y+gtxy3HK+G3Ah60g1hGfrxv67nL6CJ/T56easDKE2TAukzxW+/WOLqyGE7cBg0FR2KhiTJYs+FKrw==" crossorigin="anonymous"></script>
</body>

</html>

Bodymovin.js not working - animation is not rendering

2 Answers2