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:

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).
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.

i think both css/javascript is good enough to solve your problem, but each of them has some benefits. i usually use css animation on static item. but on your subject i think you have not fix scale of offset, so i recommand to your javascript — Shayan
– Shayan, Commented Mar 15, 2016 at 3:01
@shayanypn Won't the performance be impacted if there are a lot of hidden elements on the page? — Zizheng Tai
– Zizheng Tai, Commented Mar 15, 2016 at 3:02
@BarthesSimpson I mean CSS animation. Like getting thrown across the screen or something like that. — Zizheng Tai
– Zizheng Tai, Commented Mar 15, 2016 at 3:03
on webpage performance reduce if your page size become big. so use of too much image,jquery libraries, fonts and .. reduce your performance ,but simple html tags and text, no — Shayan
– Shayan, Commented Mar 15, 2016 at 3:05

Community · Accepted Answer · 2017-05-23 12:31:30Z

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.

edited May 23, 2017 at 12:31

CommunityBot

11 silver badge

answered Mar 15, 2016 at 3:14

BarthesSimpson

96910 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Zizheng Tai Over a year ago

Thank you for answering! One thing I'm concerned about is the performance impact of animating every single message element, another is the animation performance of JS vs. CSS (we are targeting both desktop and mobile clients, so performance and energy consumption are big concerns). Do you think using pure CSS animation can improve on that? I don't know if this will work at all, but I'm thinking about adding a batch of messages with animation delays set onto the page, or something like that.

Zizheng Tai Over a year ago

Seems there are dedicated JavaScript libraries (GSAP, Velocity.js, etc.) that might help...?

BarthesSimpson Over a year ago

perhaps, though these are very lightweight animations. If you prefer, you could use a CSS3 transition. I will update the answer.

Collectives™ on Stack Overflow

Schedule animations with CSS/JavaScript?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related