JSFiddle - React, Tailwind, and code Playground

HTML

<script   src="https://code.jquery.com/jquery-2.2.1.min.js"   integrity="sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem+O00="   crossorigin="anonymous"></script>

JavaScript

//when you get your messages from the server:

var messageQueue = [
    { "content": "foo", "offset": 1 },
    { "content": "bar", "offset": 2 },
    { "content": "poi", "offset": 3 }
  ]

//identify where you want to put the message, i.e. $('body'), or some div

var target = $('body')

//loop through the message queue giving each an offset

var delay = 2000; //this is 1s but you can make it anything you want
$.each(messageQueue, function(i, v) {
    setTimeout(function() {
        throwAcrossScreen(v.content); 
   }, v.offset * delay);
});

//create a temporary container for the message then fling it across the screen
//the element will be destroyed once it reaches the far side of the screen
//and the new message will appear at that moment

function throwAcrossScreen(message) {
    var div = $('<div/>', {html: message})
               .css({position: 'fixed', left: '0%'})
               .appendTo(target)
               .animate({left: '100%'}, 5000, function() {
                 div.remove()
               });
};