LottieFiles
0:000:00

Animación gratuita Goofy Morphing Faces

I currently use this animation to switch from one face to the next on hover. If you would also like to have the same functionality use this code with Lottie interactivity. LottieInteractivity.create( { player: '#faces', mode:"chain", actions: [ { state: 'autoplay', frames: [1,104], transition: 'onComplete', delay: [970], jumpTo: [2] }, { state: 'autoplay', frames: [2,104], transition: 'onComplete', }, { state: 'loop', frames: [105,239], transition: "hover", }, { state: 'autoplay', frames: [240,358], transition: 'onComplete', }, { state: 'loop', frames: [359,557], transition: "hover", }, { state: 'autoplay', frames: [558,737], transition: 'onComplete', }, { state: 'loop', frames: [738,901], transition: "hover", }, { state: 'autoplay', frames: [902,961], transition: 'onComplete', }, { state: 'autoplay', frames: [0,1], transition: 'onComplete', jumpTo: [1] } ], });

I currently use this animation to switch from one face to the next on hover. If you would also like to have the same functionality use this code with Lottie interactivity. LottieInteractivity.create( { player: '#faces', mode:"chain", actions: [ { state: 'autoplay', frames: [1,104], transition: 'onComplete', delay: [970], jumpTo: [2] }, { state: 'autoplay', frames: [2,104], transition: 'onComplete', }, { state: 'loop', frames: [105,239], transition: "hover", }, { state: 'autoplay', frames: [240,358], transition: 'onComplete', }, { state: 'loop', frames: [359,557], transition: "hover", }, { state: 'autoplay', frames: [558,737], transition: 'onComplete', }, { state: 'loop', frames: [738,901], transition: "hover", }, { state: 'autoplay', frames: [902,961], transition: 'onComplete', }, { state: 'autoplay', frames: [0,1], transition: 'onComplete', jumpTo: [1] } ], });

  • dotLottie optimizadoRecomendado
    15.8 KB

    El tamaño de archivo más pequeño con compatibilidad con temas, máquinas de estados e interactividad.

    92% más pequeño que Lottie JSON
  • dotLottie
    15.2 KB

    Animación Lottie comprimida que admite temas y máquinas de estados.

  • Lottie JSON optimizado
    190.2 KB

    Formato JSON optimizado para una carga más rápida con compatibilidad estándar con Lottie.

    5% más pequeño que Lottie JSON
  • Lottie JSON
    200.7 KB

    Formato de animación Lottie estándar con amplia compatibilidad entre herramientas y plataformas.

Other export formats

Interacciones y complementos

Ver todo
figma
after-effects
framer
canva
webflow
wix

Gratis para usar bajo la Licencia Simple de Lottie