Adding a json file from lottie javascript (bodymovin)

Saola Animate Support Questions
1

Problem: How can I add a json file from lottie javascript in my scene?

This json renders a vector animation throught the lottie.js library. It must be inside a div.
I know I must included the script library at head. But I do not find the way to use neither the resource json as miscelanea file, nor as html widget. Maybe the funtions are the way to add the json but help does not explain so much about and my programming knowledge is limited.
I appreciate any help

Saola Animate version: 2.5

OS: windows 7

Notes: I paste here the few lines need to make it work

<head>
     <script src="lottie.js"></script>
</head>
<body style="background-color:#ccc; margin: 0px;height: 100%; font-family: sans-serif;font-size: 10px">

<div style="width:100%;height:100%;background-color:#333" id="bodymovin"></div>

<script>

    var animData = {
        wrapper: document.getElementById('bodymovin'),
        animType: 'html',
        loop: true,
        prerender: true,
        autoplay: true,
        path: 'gato.json'

    };
    var anim = bodymovin.loadAnimation(animData);
    window.onresize = anim.resize.bind(anim);
</script>
</body>
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

3

Great!!! It works perfectly.
Thank you for your quick answer. I think you are making a very nice and clear software.

I could sugget to make posible to render on the fly external javascript librarys inside of your application, something similar to codepen.io, that would improve designing work a huge.

I will keep playing with this json and saola animate.
Cheers mate!

4

Hi,

Using external JavaScript libraries to render inside the editor may cause many unexpected behaviors when editing so we don’t do that.

Regards