Adding a json file from lottie javascript (bodymovin)

Saola Animate Support Questions
2

Hi,

You can take the following steps to show a lottie animation:

  1. Import lottie javascript file and your json animation file into Resources pane.
  2. Insert a Rectangle Div element into the scene, set it a meaningful name for using in the script below. The animation will be rendered into this element.
  3. Add a Run JavaScript action to an event (e.g. Scene Activate) to render the animation.
function onSceneActivated(doc, e) {
  var animation = bodymovin.loadAnimation({
    container: doc.getElement('lottie').dom, // lottie is the name of the element in step 2
    path: doc.getResourceFolder() + 'lottie-anim.json', // lottie-anim.json is the animation file name
    renderer: 'svg'
  });
}

Here’s a sample project lottie animation.zip (106.0 KB)

Please be noticed that lottie uses XMLHttpRequest to load animations so it may not work when viewing locally through file protocol in some browsers (e.g. Chrome).

Regards

Export to SVG animation