Best jQuery Core Java Script Plugins & Tutorials with Demo

HexaFlip is a JavaScript UI plugin that let’s you use 3D cubes as interface elements. Dive into the process of creating the plugin and learn some best practices regarding flexible UI plugins.

I originally developed a simpler version of HexaFlip for an iPhone app I built called ChainCal where it served as a time-picker interface for setting alarms. Most mobile time-picker widgets are fashioned after a dial, but I reasoned that rotating cubes would serve for a more unique and memorable experience. As we all know, a cube has six (i.e. “hexa”) faces, but when rotating it around a single axis, we only have four to work with (front, top, back, and bottom). Thus if we built a cube interface using CSS alone, our interface would be limited to four options per choice. HexaFlip solves this issue and playfully challenges the user’s expectations by allowing the cube to cycle over a list of any length.

With Anima it’s easy to animate over a hundred objects at a time.Anima gives you the ability to use delays and durations normally, even for pure CSS animations. It has two modes: JS and CSS. The first one doesn’t really use CSS transitions or @keyframes. On the contrary, it uses CSS transforms and 3d-transforms together with Javascript to create animation. You have full control over the flow, so you can start, stop, cancel animations and even create event-based stuff. CSS mode allows you to generate pure CSS animations, but it has limitations for parallel animations.