Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Comercial
    • Calculadora

0

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