Can't see my animation

[calciphil]

Hello,

I have used bodymovin to change my AfterEffect animation in html5 as seen in much videos.

So to put it in my html I put this part of code :

    <div id="bm"></div>   
    <script src="lottie.js"></script>
    <script src="script.js"></script>

In my CSS, I add this :

#bm { width: 600px; }`

and in my script.js, I add this code :

var animation = bodymovin.loadAnimation({ container: document.getElementById('bm'), renderer: 'svg', loop: true, autoplay: true, path: 'data.json' })

But my animation is never diplayed on my screen, tried to understand for hours now but all videos do the exact same than and the result is never the same. Thanks for any help !!

Projet.zip

[jonasanne]

when I open the project I see the animation. It work. If you still don't find it, give your div a background color so you find it easier.

[calciphil]

How is this possible... I checked on my side and the machine lower on the screen, can I ask you on what navigator did you launch the "website" or if you changed any css ? My friends tried it and didn't see the glass either

[bodymovin]

@calciphil you should probably try to upload it to a web server. If you are running it from your file system, because of browser security, it won't work.

[calciphil]

Well, well, well I'll try to host it on github tomorrow and I'll give you the result ! thank both of you

[calciphil]

Okay, I hosted my animation on github, as it's a static site : https://calciphil.github.io/ I know, it's not yet close to be the final site but the animation should be just beneath the machine and yet it still doesn't display. Any ideas ? @jonasanne How did you display it ? Maybe it's your navigator, you did something special ?

[bodymovin]

There seem to be a couple of issues. First, you are loading the DrinkityDesign.js script twice, once before loading lottie and once after. You should load it after lottie since your script is assuming the library is already loaded. Second, you are targetting an element 'bm' that doesn't seem to be present on your DOM. Can you check you have added an html element with id "bm"?

[xdany01]

@calciphil

2149

Hello everyone. I have the same problem. I use the visual studio code. I was able to find two possible solutions for this problem. 1-The first is necessary to use a server. You can use Xamp, Wamp or you can also use the liveServer extension. And also the following must be added in the javaScript file:

const xhtml = new XMLHttpRequest(); var filePath = "here place the json path"; xhtml.open("GET", filePath, false); xhtml.send(null); var datosJSON = JSON.parse(xhtml.responseText); var anim = lottie.loadAnimation({ container: document.getElementById('lottie'), renderer: 'svg', loop: false, autoplay: false, animationData: datosJSON, });

2-The second solution I found is to create a javaScript file and within it create a variable or constant whose content is the data.json and then link it in the html file. This way you will be able to reference that variable or constant from the main javaScript file. -In the html: <script src="data.js"></script> -In the data.js: const info = here goes the complete json; -in the main.js: var anim = lottie.loadAnimation({ container: document.getElementById('lottie'), renderer: 'svg', loop: false, autoplay: false, animationData: info, });