Help in using Lottie with Ghost

Hello, I saw this forum post while trying to fix my problem… How can I make data available via URL in ghost to use with d3.json

But after following that, the problem still persists.

Basically, I’m trying to use the Lottie Web Player to load animated things on a Ghost website I’m building. I understand that Ghost might not load JSON files for security purposes… But now I’m wondering if there will be any way for me to still be able to use Lottie with Ghost?

For reference, here’s what I’ve set up so far (which doesn’t work):

My routes.yaml:

    controller: channel
    template: stories
    template: right
    content-type: json
    template: left
    content-type: json

    permalink: /{slug}/
    template: index

  tag: /tag/{slug}/
  author: /author/{slug}/

The JavaScript found in my default.hbs:


let bgLines_upperRight = document.getElementById('bg_lines_upper_right');
        container: bgLines_upperRight,
        renderer: 'svg',
        loop: true,
        autoplay: true,
        path: '/upper-right/'


As for the original JSON files, I renamed them right.hbs and left.hbs (because there are two animated things I wanted to load on the website) as I was following the solution posted in another forum post before.

Ghost version:

Ghost-CLI version: 1.11.0
Ghost version: 2.25.2 (at ~/Documents/Personal/nerve-website)

I’ve tested in both Chrome (Version 75.0.3770.100) and Firefox (Version 67.0.4) and they both persist. In Chrome, I get the following error in the Developer console:

GET http://localhost:2368/upper-right/data.json/ 404 (Not Found)      lottie.js?v=72c303f51c:4326

Please, can anyone help me with this? Or have you encountered it yet and have found a solution? I’m at my wits end with this. Anything would be appreciated. Thank you!

1 Like

What I ended up doing was just to have the JSON files hosted in another website, and call that in the LottieJS code. The only hurdle I had to go over was solved with CORS.


Where did you host your JSON file @chisenires ?