Not rendering in Gatsby

[k4y4k]

Howdy 👋

To start off with, my issue is (from the looks of it?) pretty similar to #10.

I generated this lottie animation with After Effects + Lottiefiles. The animation is just images[1], rigged with Duik, baked with EasyBake, and then rendered.

It plays fine on lottiefiles.com, in the After Effects preview pane, and even on my phone.

Therefore, I saved the animation (clown-dance.json) to disk and tried to plug it into a component:

import * as React from 'react'
import Lottie from 'react-lottie-player'
import * as animationData from '../../anim/clown-dance.json'

const DisplayAnimation = () => {
  return (
    <>
      <h1>DisplayAnimation.tsx</h1>
      <Lottie
        loop
        animationData={animationData}
        play
        style={{ width: 300, height: 300 }}
        renderer='canvas'
      />
    </>
  )
}

export default DisplayAnimation

but no dice:

The console has nothing to say, except a warning from React Hot Loader (probably gatsby's fault?).

Additionally,

When I set the renderer prop to svg, I get these errors:

Any ideas?

[1] Which I suspect is the issue

[k4y4k]

Nevermind!

I found chenqingspring/react-lottie#115, which says:

- import * as animationData from './pinjump.json'
+ import animationData from './pinjump.json'

// ...

const defaultOptions = {
  loop: true,
  autoplay: true, 
- animationData: animationData,
+ animationData,
  rendererSettings: {
   preserveAspectRatio: 'xMidYMid slice'
  }
}

And whaddya know, it worked!

my happy little clown dances on 🎉