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:
system
Closed
5
This topic was automatically closed after 42 days. New replies are no longer allowed.