Amazon S3 Hosted Bodymovin .json

Design help Custom code
1

Hi community

I’ve been working to try and fix the problem and I’m pretty sure I’m nearly there, but to recap:

I’m trying to add a bodymovin animation to a 100% VH content block on my home page, but for the life of me I can’t get the animation to play. I’ve spent quite a while looking at this forum as I know the topic has been covered before, but with the github raw method no longer working, I’ve hit a wall.

I have added the .json file to a public access bucket in Amazon S3 here:

https://s3.eu-west-2.amazonaws.com/praetorianwebsite/shieldanimation.json

Using the following script in the Inside tag of the home page:

script src=‘https://cdnjs.cloudflare.com/ajax/libs/bodymovin/4.10.2/bodymovin.js’></script

And then this in a html div block ‘bodymovin’

script>
var loader = document.getElementsByClassName(“bodymovin”);

function loadBMAnimation(loader) {
var animation = bodymovin.loadAnimation({
container: loader,
renderer: “svg”,
loop: true,
autoplay: true,
path: “https://s3.eu-west-2.amazonaws.com/praetorianwebsite/shieldanimation.json”
});
}

for (var i = 0; i < loader.length; i++) {
loadBMAnimation(loader[i]);
}
</script

I’ve then created a ‘bodymovin’ div class with the following custom attributes:

data-bm-renderer
svg

data-bm-autoplay
true

I really am stumped, so any help would be amazing!

Clearly I’ve got something wrong somewhere, but my coding experience is non-existent, so it’s very much a baptism by fire. Here’s the site https://praetorian.webflow.io/ and the share link

Any help would be greatly appreciated. Thanks,

Tom

2

Bumping up the list…

3

Realised that I needed to get the CORS plugin for Chrome for it to work on the preview site. All fixed.

4

Did it work @tombourne ?Because I can’t see anything in your website.
For my side, I can’t make it work … :disappointed_relieved:

5

Yep. It works, but you need the CORS extension for Chrome to view it on a prepublished site. This should do you https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en and make sure your S3 bucket is public. Should be okay then. :+1: