Keeping aside the pros and cons of creating animations with JavaScript, there are a number of powerful JavaScript libraries available online that can render flawless presentation. Some of those are complex and require tweaking, some over-simplified and some of JavaScript animation libraries are suitable for short animations only. Timeline.js, however, gives a a nice framework for creating long sequences as well as short animation with powerful control on each frame of the animation.

Timeline.js provides complete frame by frame view of animation and also enables you to edit each frame individually.

Hope you did not miss our recent post on use of maps in website designs as major trends in 2011 where we discussed how maps are being used creatively for many different purposes. Whether you are designing for a location based service or playing with maps in your website, there are a number of useful mapping tools available online for free (some of those have already been shared here). Today, we are sharing another useful mapping tool for designers.

TileMill is a tool for designers to design and integrate maps with custom data quickly and easily on the web. It is built on the powerful open-source map rendering library Mapnik.

TileMill can also export directly to the SQLite-based MBTiles file format for offline maps. It also gives you full control on style and layout (colors, layers, fonts etc.) to customize maps as per your requirements.

Major Features

• Access datasources on the local filesystem or through Amazon S3
• Manage map layers with file-based datasources (shapefiles, rasters)
• Preview map tiles instantly while editing stylesheets
• Inspect datasource field values and data types
• Export maps to PNG, PDF and MBTiles formats

TileMill is actually intended for cartographer but you can master it with a little effort to design simple maps for your personal usage.

jFormer is a complete framework for generating template based forms for websites, blogs etc. With this simple and manageable framework, you can create forms that can use triggers to lock/unlock fields, prevent bot intervention (no CAPTCHA required), and can be paused and resumed.

Fields in jFormer forms can be duplicated and based on pre-defined template. Forms can be validated on both client and server side. jFormer uses CSS for complete control on UI and supports AJAX to allow you to minimize callbacks to server side.

DAT.GUI is a lightweight controller library for JavaScript for controlling variables and functions on the fly. The library uses  DAT.GUI panels to contain UI controls and allow you to manipulates with variables to control the GUI elements.

Since manipulation is real-time, you can use this lightweight library to simulate objects and flow charts or just display data visualizations and dynamic data.

Parameters can be set easily to view changes and get desired results.

Interactive maps are now all over the web and are being used in many different ways on websites and web applications. Check out why integration of maps is leading the emerging trends in web design and how people are actually using them on their website and web applications.

Today’s post is about a simple jQuery script that allows you to display interactive geographical map of Europe for your website or web application. Governed by plain CSS 2.1 style sheet, it can render geographical map of Europe smoothly in all modern browsers and smart devices like iPhone or iPad.

The script uses simple unordered list to generate click-able map of Europe with (limited) drill down capabilities. You can click a country to view its geographical regions. The regions can be further clicked and selected.

Features

• Hand coded, valid xHTML and CSS
• Four maps: 500, 660, 810 and 960px wide
• Preloader and multiple-click mode
• No Flash Player required!

The script works (with certain limitations) without JavaScript but most importantly it doesn’t need Flash Player or any additional plug-ins! The download package contains editable PSD source files for each map size.

Sammy.js is a tiny JavaScript framework built on top of jQuery for rapid application development. It provides a comprehensive yet manageable set of plugins and functionalities that you can embed in your code to ease the development process.

Sammy is based on a set of integrated plugins and adapters that you can pick and choose to use in your own code as per the desired functionality. Since basic structure of your JavaScript application comes from Sammy, all you have to do is to use the simple API and start building your application. If you already have some structure to start with, just use Sammy as a set of building block to add in your application.

The API is fairly simple and clean. By driving application development around a small and specific API, Sammy helps to keep your code organized while still allowing a lot of breathing room to define your own style and structure.

Tabs are a useful tool for providing bulk of information in a small space with complete interactive experience. They can animate, contain images and forms, list features, and provide tabbed interface for dynamic content and much more.

However most tab solutions available online are too complex to personalize, scale up or trim down – unlike Classy Tabs.

Classy Tabs is a lightweight, jQuery plugin that creates clean, fast, and efficient tabs. Powered by jQuery and CSS3, Classy Tabs is free to use and easy to personalize for all types of contents. You can use it to display plain text, dynamic content, images, forms etc.

Read the rest of this entry »

Remember Slides, Easy Gallery Manager and SimpleSlide that we have featured earlier on this website? These are awesome plugins for displaying and animating pictures in limited space but sometime you want to pack more features in a lightweight and simple slideshow solutions… just like Skitter.

Skitter is a feature rich and flexible jQuery slideshow plugin that comes with 22 unique and smooth animations.

It also provides various transition options like speed, interval and animation effects. Skitter offers pagination and navigation (next and previous) controls to allow users to drive the slideshow as they like.

Skitter is free, lightweight and customizable to fit in many different scenarios.

First thing first – if you have not played with HTML 5 Canvas yet, do it now. The canvas element in HTML 5 allows you to render dynamic content (2D shapes, graphs, animations, games etc.) in almost all browsers with the least bit of code. If you want to dig deeper, you can use Javascript to get access to full drawing functions.

To get started, check out  oCanvas, which is a JavaScript library for rendering canvas drawings easily and seamlessly in all modern browsers. oCanvas allows you to work with objects instead of manipulating at pixel level to draw objects.

With oCanvas, you can create objects, change properties of these objects and add events to them — and everything just works because oCanvas handles the background stuff for you. oCanvas supports charts, animations, 2D objects, and shapes in a drag-and-drop environment.

Pow is a zero-configuration Rack server for Mac OS X. It makes developing Rails and Rack applications as frictionless as possible.

Pow is a clean, self-contained server that runs as your user without root privileges. No mucking around with /etc/hosts, no compiling Apache modules, no editing configuration files or installing preference panes. A single command installs and upgrades Pow automatically and your system files are left pristine and untouched.

Running multiple apps with multiple versions of Ruby is trivial. Pow runs as your user on an unprivileged port, and includes both an HTTP and a DNS server.