I am trying a simple example of react-lottie. I am not not getting any errors but the animation doesn't show.

I have tried another tutorial which did it a slightly different way and that had the same result - no errors and no animation.

I have tried switching out the json files for others from the Lottie Files website to no avail.

I don't know how to troubleshoot this as I can't don't know where to start debugging.

Any ideas?

Many thanks

import React, { Component } from 'react'
import Lottie from 'react-lottie'
import * as animationData from './globe.json'

class UncontrolledLottie extends Component {


    render(){

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

        return(
            <div>
                <h1>Lottie</h1>
                <p>Base animation free from external manipulation</p>
                <Lottie options={defaultOptions}
                        height={400}
                        width={400}
                />
            </div>
        )
    }
}

export default UncontrolledLottie

I am trying a simple example of react-lottie. I am not not getting any errors but the animation doesn't show.

I have tried another tutorial which did it a slightly different way and that had the same result - no errors and no animation.

I have tried switching out the json files for others from the Lottie Files website to no avail.

I don't know how to troubleshoot this as I can't don't know where to start debugging.

Any ideas?

Many thanks

import React, { Component } from 'react'
import Lottie from 'react-lottie'
import * as animationData from './globe.json'

class UncontrolledLottie extends Component {


    render(){

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

        return(
            <div>
                <h1>Lottie</h1>
                <p>Base animation free from external manipulation</p>
                <Lottie options={defaultOptions}
                        height={400}
                        width={400}
                />
            </div>
        )
    }
}

export default UncontrolledLottie

• javascript
• html
• reactjs
• lottie

2 Answers 2

Try without the * as import, e.g.:

import animationData from './globe.json'

so animationData needed to be swapped to animationData.default

I think the tutorials are out of sync with the latest version of the libary