This the right way to do it?


Fresh Top
  1. nice! I guess you want to emulate how it will work in a page here. normally, you load the json as an external resource and initialize it on a specific parent div.

    check out how we do it on the logged out version of keyframes.net

    <div data-bodymovin-path="https://d2k92zzmmg513j.cloudfront.net/assets/bubbles-8661f850c21b34d1d2b2fcd32f3351a1607de33a9e7cdab2739430ca5a781195.json"></div>
  2. paired with this js

      document.querySelectorAll('*[data-bodymovin-path]').forEach((el) => {
        if (!(el.dataset && el.dataset.bodymovinPath)) return;
        const animation = bodymovin.loadAnimation({
          container: el,
          path: el.dataset.bodymovinPath,
          renderer: 'svg',
          autoplay: false,
          loop: false,
        if (el.classList.contains('icon')) {
          animation.addEventListener('complete', playRandomPostIconAnimation);
        } else {
          animation.loop = true;
  3. you can disregard the playRandomPostIconAnimation / icon thing, thats a special case where we play one from a set at a time. the loop = true and play part is what you want

Sign Up or Log In to leave a comment.