0

So, I've got what looks to me like a pretty simple setup. My end goal is to embed a lottie animation into my website (webflow). In Atom everything works fine.

HTML:

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

index_1.js:

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

And the animation plays in my HTML preview! Yay! Webflow, however doesn't have file hosting, so I decided to throw my "lottie.js" and "index_1.js" scripts and "process_1.json" on Amazon s3 and link them up using the file's public urls, but nothing appears on my website!

Is Amazon s3 not good for this sort of thing? Perhaps the "path" parameter in my index_1.js doesn't accept urls? 

var animation = bodymovin.loadAnimation({
  container: document.getElementById('lottie'),
  renderer: 'svg',
  autoplay: true,
  path: 'https://audioplayerskin.s3.amazonaws.com/Json+Files/Process_1.json'
})

What could be the problem here?

Thanks! :)

Matt
  • 11
  • 1
  • 1
    Are there any errors in the JavaScript console? – Barmar Jun 13 '19 at 01:49
  • There are not! After some trial and error, I discovered that amazon probably isn't the best place to reference files that aren't media. Audio and video always work fine, but I've had trouble now with CSS, JS, and JSON. It works just fine when I host the file on lottiefiles.com and use that url instead :) – Matt Jun 14 '19 at 03:09
  • Do you have a link to share with the error? It might be a CORS issue, or order of imports. – airnan Jun 17 '19 at 15:55

0 Answers0