Roots Discourse

Bodymovin animation

Has anyone used Bodymovin for an animation with Sage? Trying to implement it for the first time.

The animation was created in After Effects and exported into a JSON file.

In my main.js file, I have:

import bodymovin from 'bodymovin';

var animation = bodymovin.loadAnimation({
  container: document.getElementById('bodymovin'), // Required
  path: 'loader.json', // Required
  renderer: 'svg/canvas/html', // Required
  loop: true, // Optional
  autoplay: true, // Optional
})

I keep getting a 404 error on the loader.json file. The loader.json file lives in web/app/resources/assets/loader.json.

I’ve tried several different combinations for the file path, but still keep getting a 404 error.

I don’t know your file organization, but assuming that main.js is in your assets/scripts directory, couldn’t you do the following?

import bodymovin from 'bodymovin';
const loader = require('../loader.json');

var animation = bodymovin.loadAnimation({
  container: document.getElementById('bodymovin'), // Required
  animationData: loader // Required
  renderer: 'svg/canvas/html', // Required
  loop: true, // Optional
  autoplay: true, // Optional
})

Then you don’t need to worry about path because the data from your JSON file is bundled up during the build process.

Thanks for the reply! Yep, main.js is in my assets/scripts directory.

I just tried your snipped but then it threw a console error.

Looks like an issue with the JavaScript minifier (uglifyjs).
See this similar issue: