Animated Notification List

Animated notification list – In one of our previous article, we have seen how to create a notification popup easily with the help of minimum HTML, CSS3 and javascript/jQuery. As We all are familiar with notification pop up on different social medias or portals like Linkedin, Facebook etc…, it is good to learn how to create a notification popup easily. We must have noticed in web or mobile applications, the number of notifications are shown near to a bell icon and when we click on the notification numbers or link, a pop up is displayed with the notification details.

Animated Notification List with CSS3 animation

As we know or we have seen, it is easy to create a notification pop up with the help of very little HTML, css and javascript. But in this tutorial, we will see how to create a notification list which has some animations. The animations on your web page makes it more interesting for the end user. The features in CSS3, helps us to add some animation effects to the elements, rather than adding animations with a lot of javascript or jQuery.

Why animated notification list?.

Obviously, you must have a question, why we want to add animation to the list? If you are planning to implement lists in your websites in positions like navigation list or sidebar list, by animation we can improve user interaction for a webpage. So that user will notice what is happening in a page if some actions are done. This will increase the user attention to convey from where the list is getting arrived. So, things are clear… we will go forward with the implementation of the animated notification list.

First, we add a menu, which has few items like ‘Home’, ‘About’, ‘Messages’ etc… Add a class to the the ‘li’ for which has ‘message’ text. Inside this li, add the html for the pop up and the list items. Add few list items in the pop up, and add whatever content you want. Now, our HTML is ready. So we’ll see how to style the menu and pop up for a better look!

Our notification list content is ready with its styles and a good look. The remaining css addition is for animating the notification list items. We will add those styles at the end. Now, we will add the click functions for opening the pop up and closing.

Animation for the Notification List

As we added the script for opening and hiding the notification list pop up, the next step is to add some animation for the list, when it is displaying. In this article, we will add sliding effect for the notification list items; sliding from left.