<div id="" class="Bodymover js-bodymover responsiveimage _right" style="" data-animation-path="https://s3.amazonaws.com/insightsblog/assets/animation-yir-product-updates-2.json" data-autoplay="true" data-loop="true">
    <span class="u-text-screenreader">Loading animation</span>
</div>
<div id="{{id}}" class="Bodymover js-bodymover {{modifier}}" style="{{style}}" data-animation-path="{{url}}" data-autoplay="{{autoplay}}" data-loop="{{loop}}" {{#if assetpath}}data-asset-path="{{assetpath}}"{{/if}}>
    <span class="u-text-screenreader">Loading animation</span>
</div>
{
  "id": null,
  "modifier": "responsiveimage _right",
  "style": null,
  "url": "https://s3.amazonaws.com/insightsblog/assets/animation-yir-product-updates-2.json",
  "autoplay": true,
  "loop": true,
  "assetpath": null
}
  • Content:
    import {each, ready} from '@sproutsocial/sprout-brand/modules/util';
    import bodymovin from 'bodymovin/build/player/bodymovin_light';
    
    ready(() => {
        each(document.querySelectorAll('.js-bodymover'), bodymover => {
            bodymover.innerHTML = ''; // Removes loading text
    
            bodymovin.loadAnimation({
                container: bodymover,
                renderer: 'svg',
                loop: !!bodymover.getAttribute('data-loop'),
                autoplay: !!bodymover.getAttribute('data-autoplay'),
                path: bodymover.getAttribute('data-animation-path'),
                assetsPath: bodymover.getAttribute('data-asset-path')
                    ? bodymover.getAttribute('data-asset-path')
                    : 'https://media.sproutsocial.com/uploads/'
            });
        });
    });
    
  • URL: /components/raw/bodymover/Bodymover.js
  • Filesystem Path: components/atoms/Bodymover/Bodymover.js
  • Size: 769 Bytes

Bodymover

Bodymover is a component that will take a JSON file and animate an SVG path using the Bodymovin library.

Best Practices

  • Only use Bodymover when you’re absolutely sure the insane file size for the library and JSON file is worth the animation.
  • Never put the JS initialization into a bundle, instead create a new webpack entry point and put it on only the pages that need the Bodymovin library.