Streaming live at 10am (PST)

Amazon S3 Hosted Bodymovin .json

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

Bumping up the list…

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

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

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: