javascripthtmlbodymovin

Bodymovin.js not working - animation is not rendering

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>
Solution

  • 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>