When I have a series of events in my browser, I want to display them as a list with a smooth animation effect. As each new event comes in, I'd like the existing items to slide down gracefully, making room for the new event to fade in at the top of the list.
For this animation, I am looking to use a lightweight engine such as transit.js or velocity.js.
Although I attempted to use translateY: '1em', I noticed that instead of moving all the items down by one line each time, the animation would only work once and subsequent calls would keep the items in the same position.
Here is an example snippet of code:
<ul id="container">
<li>blah</li>
<li>yoyo</li>
</ul>
And here is the corresponding JavaScript code snippet:
$("#container").children().velocity({
translateY: "1em"
}, 1000);
$("#container").prepend("<li>yar</li>");
$("#container").children().velocity({
translateY: "1em"
}, 1000);
$("#container").prepend("<li>yar</li>");
You can view the code in action on CodePen: http://codepen.io/ankopainting/pen/KNwYxJ