Schedule animations with CSS/JavaScript?

Question

We have a web application that needs to display messages from the server on the page in some order. The messages can be downloaded all at once with JavaScript, but they should only be shown at their scheduled times. For example, if there are three messages:

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

They should appear on the page at 1s, 2s, and 3s from the moment the page is loaded, and each of them should disappear (independently of the others) from the page after it is animated on the page in some way.

My questions are:

1. Is it better to use JavaScript to dynamically add/remove the message elements to/from the page when it's time, or to add all messages to the page at once (hidden at first) and use the CSS animation delay to control their appearance? There might be a lot of messages (like 10000).

2. For whichever you think is the appropriate way (CSS/JavaScript), can you give some advice as for how to implement it? I'm a backend developer, so I'm not really sure what to do. Some directions or ideas are appreciated.

Answer 1

It's certainly better to have one element at a time with content that refreshes rather than 10000 hidden elements which are gradually revealed.

In JQuery, you could do something like this:

//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 = $(wherever you want to print the message)

//loop through the message queue giving each an offset

var delay = 1000; //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()
               });
};

Here is a jsfiddle showing it in action.

Or, with CSS3 animation replace the last part with this:

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

And in your CSS file have:

.message {
    position: 'fixed';
    left: '0%';
    -webkit-transition: left 5s;
    -moz-transition: left 5s;
    -o-transition: left 5s;
    -ms-transition: left 5s;
    transition: left 5s;
}

Although, this answer suggests an alternative for better performance.