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
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>
);
}