LottieFiles
0:000:00

Kostenlose Goofy Morphing Faces Animation

15.2 KB

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

Interaktionen & Plugins

Alle anzeigen
figma
after-effects
framer
canva
webflow
wix

Kostenlos zu verwenden unter der Lottie Einfach Lizenz