JSFiddle - React, Tailwind, and code Playground

by Alexander

HTML

<div id="channel1"></div>
<div id="channel2"></div>

CSS

div {
  margin: 1em;
  padding: 1em;
  border: solid 1px gray;
  float: left;
  width: 200px;
  height: 200px;
  position: relative;
}

JavaScript

var data = [{
  display: "#channel1",
  loop: false,
  frames:[{
    duration:5, content:"foo",
  },{
    duration:5, content:'<span style="color: red;">foobar</span>',
  },{
    duration:3, content:'<span style="color: green;">last frame<br>'
    +'loop=false</span>',
  }]},{
    display: "#channel2",
    loop: true,
    frames:[{
      duration:7, content:"otherfoo",
    },{
      duration:1, content:"<h1>1 second</h1>",
    },{
      duration:3, content:'kitty-kitty!<br>'
      +'<img src="//pa1.narvii.com/6497/4aadd712'
      +'0647e08f455638fd280485136213957a_128.gif">',
    }]
  }
];

(function(sequences){
  sequences.forEach(function(sequence, i){
    var target = document.querySelector(sequence.display),
        delay = sequence.frames[0].duration,
        frame = 0,
        timer = setInterval(function(){
          if (--delay <= 0) { // switch to next frame
            if (++frame >= sequence.frames.length) { // if last frame
              if (sequence.loop) frame = 0 // return to first frame
              else return clearInterval(timer) // or stop
            }
            delay = sequence.frames[frame].duration
            target.innerHTML = sequence.frames[frame].content
          }
        }, 1000)
    // daw first frame without timer
    target.innerHTML = sequence.frames[0].content
  })
})(data)