I want my lottie animation to start animating when hovered on Desktop and autoplay on mobile view. is there a way to make that happen?
I want the animation to rewind back when cursor is off Something like this
This is the code I used to animate.
Thank you
export default function Landing() {
useHorizontal();
const box1 = {
loop: true,
autoplay: true,
animationData: svg1,
rendererSettings: {
preserveAspectRatio: 'xMidYMid slice',
},
};
const box2 = {
loop: true,
autoplay: true,
animationData: svg2,
rendererSettings: {
preserveAspectRatio: 'xMidYMid slice',
},
};
const box3 = {
loop: true,
autoplay: true,
animationData: svg3,
rendererSettings: {
preserveAspectRatio: 'xMidYMid slice',
},
};
return (
<div className="app" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<Lottie options={box1} height={900} width={900} />
<Lottie options={box2} height={900} width={900} />
<Lottie options={box3} height={900} width={900} />
</div>
);
}