• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

130
Vistas
Start lottie animation when hovered on desktop

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>
    );
}
almost 3 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda