javascript - React Lottie not showing animation not showing (web) - Stack Overflow

admin管理员组

文章数量:1345199

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

Share Improve this question Follow asked May 17, 2020 at 1:45 Ian McGarryIan McGarry 14511 silver badge1111 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 12

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

本文标签： javascriptReact Lottie not showing animation not showing (web)Stack Overflow