How to Animate Threaded Comments with CSS and jQuery

With many social applications the use of threaded comments has become a staple in functionality. Webmasters today are focusing much more on user experience rather than content generation, and because of this there has been a rise in custom animation effects.

Below I’ll be going over a guide to building your own custom jQuery threaded comments from scratch. For the ease of our tutorial we won’t be using any backend system to actually store the data anywhere. This means no MySQL databases or PHP calls to a server – all comments are added in-page and will be lost upon page refresh.

jQuery Animated Comments Thread

Well Designed Threaded Comments Sections in Webpages

Comments are an important part to any website community. Within the comments section visitors of your website may share their ideas, thoughts, and related links on topic with your content. It’s revolutionized the web 2.0 era!

Today we take comments as often commonplace wherever we go. Most blogs will include this feature by default. This also includes many of the popular open source projects such as Wordpress, MovableType, Blogger, and others. And although many of these are semi-closed off the most popular systems allow for customizations.

This is where threaded comments have begun. Including threads within the conversations allows for branching topics and more direct responses. Below I’ve gathered a hefty collection of threaded comment designs for your viewing pleasure. Feel free to leave your own comments as well if anything strikes your eye!