#250·vivus

Animation automatically replay

Author: MarcoGoeliCreated Jun 20, 2023Updated Nov 15, 2024

Hello I want to automatically reset my Vivus animation so it starts again. Put simply, create a continuous loop. It doesn't work with my script.

Style CSS #logo { width: 200px; height: auto; } #logo * { fill-opacity: 0; transition: fill-opacity 10s; } #logo.finished * { fill-opacity: 1; }

svg <svg id="logo"... ...</svg>

js var myVivus = new Vivus( 'logo', { type: 'oneByOne', //delayed, sync, oneByOne, script, scenario, scenario-sync duration: 30, //Animationsdauer in Frames animTimingFunction: Vivus.EASE, //Vivus.EASE, Vivus.EASE_IN, Vivus.EASE_OUT, Vivus.EASE_OUT_BOUNCE start: 'autostart', //autostart, manual, inViewport }, function (anime1) { setTimeout(function(){ anime1.reset().play(); }, 2000); }, function (obj) { obj.el.classList.add('finished') } );

I remove the following lines: function (anime1) { setTimeout(function(){ anime1.reset().play(); }, 2000); },

then it works. What am I doing wrong.