600 West

Bodymover: Responsive Right 

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