Bodymovin animation

labedzde · May 7, 2020, 11:02pm

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.

alwaysblank · May 7, 2020, 11:21pm

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.

labedzde · May 8, 2020, 1:05am

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.

strarsis · May 10, 2020, 3:36pm

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

system · June 18, 2020, 11:02pm

This topic was automatically closed after 42 days. New replies are no longer allowed.