I want to show 2 different lottie animations, svg1 and svg2

Question

Here is my code, currently it shows svg1 twice. I want to show svg1 and svg2.

future I want to add more than 2 SVG animations. i am new to react and lottie

import React from 'react';
import Lottie from 'react-lottie';
import svg1 from '../../assets/svg/svg1';
import svg2 from '../../assets/svg/svg2';

export default function Landing() {
    const defaultOptions = {
        loop: true,
        autoplay: true,
        animationData: svg1,
        rendererSettings: {
            preserveAspectRatio: 'xMidYMid slice',
        },
    };

    return (
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
            <h1>Landing Page</h1>
            <Lottie options={defaultOptions} height={900} width={900} />
            <Lottie options={defaultOptions} height={900} width={900} />
        </div>
    );
}

Thanks

score 0 · Answer 1 · answered Oct 25 '21 at 07:49

You can define multiple "defaultOptions" variables and use them on multiple Lottie components as follow:

export default function Landing() {
    const defaultOptions1 = {
        loop: true,
        autoplay: true,
        animationData: svg1,
        rendererSettings: {
            preserveAspectRatio: 'xMidYMid slice',
        },
    };
    const defaultOptions2 = {
        loop: true,
        autoplay: true,
        animationData: svg2,
        rendererSettings: {
            preserveAspectRatio: 'xMidYMid slice',
        },
    };

    return (
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
            <h1>Landing Page</h1>
            <Lottie options={defaultOptions1} height={900} width={900} />
            <Lottie options={defaultOptions2} height={900} width={900} />
        </div>
    );
}

I want to show 2 different lottie animations, svg1 and svg2

1 Answers1