daisy-chaining a series of images?

[tallhat]

daisy-chaining a series of images?

[tallhat]

wow - thanks so much for the quick response. i'll give it a go.
much appreciated :)

[maxwellito]

Hi there,

I'm afraid there's no examples specific to what you're asking. However it shouldn't be too difficult to build.

<style>
  /* Set a class to fade out the SVG */
  svg.fadeout {
    transition: all 2s;
    opacity: 0;
  }
</style>
<div class="vivus-container"></div>
<script>
  // Get the DOM of the SVG container
  const vivusContainer = document.querySelector('vivus-container');
  // List of the SVG you want to display
  const svgList = ['./drawing1.svg', './drawing2.svg', './drawing3.svg'];
  
  function showNextDrawing() {
    // Get the first item in the list
    const svgPath = svgList.shift();
    svgList.push(svgPath);
    
    // Start vivus
    new Vivus(vivusContainer, { duration: 200, file: svgPath }, (v) => {
      // Now the drawing is finished, let's fade out
      v.el.classList.add('fadeout');
      // Then in 2.5 seconds, let's draw the next one
      setTimeout(showNextDrawing, 2500)
    });
  }
  
  // Let start
  showNextDrawing();
</script>

I haven't tested it, but it should do the job :)