Quiero que mi animación de lotería comience a animarse cuando se desplace sobre el escritorio y se reproduzca automáticamente en la vista móvil. ¿Hay alguna manera de hacer que eso suceda?

Quiero que la animación retroceda cuando el cursor esté apagado Algo como esto

Este es el código que usé para animar.

Gracias

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