Tag Archives: KineticJS

Implementing Backwards-Compatible CSS3 Animated Transitions

via Implementing Backwards-Compatible CSS3 Animated Transitions.

As web technologies become increasingly powerful and complex, so do web-based special effects as well — and in particular animated transitions between HTML elements. Their level of sophistication evolves quickly from simple, unpretentious accordion-style transitions to highly complex iPhone-style animations. Recently I posted about how to switch between scenes smoothly using the Kinetic.JS HTML5 Canvas framework. However, those transitions can only be applied in instances where just part of a scene is changing, and not the entire view.

Today I will demonstrate how to implement smooth full-page transitions…

There are a number of solutions to this task that work properly only in modern browsers supporting CSS animation, which renders useless certain versions of IE. However, there are still users of outdated versions of IE and — for those who may benefit — today’s post includes a script providing backwards-compatible browser animation. CSS3 will be used for Firefox, Chrome, and Safari; jQuery gets the call for use in IE7. See the script in action.

Using Backbone for html5 canvas

Using Backbone for html5 canvas

Developing our mind map application Slash System, we chose Backbone as the main library to build an application. The mind map is drawn into <canvas> element using various primitives. We chose KineticJS library for work with canvas, as it perfectly supports events for the objects on the canvas. In order to match the architecture of Backbone, all work with canvas (or rather with the object instances of KineticJS) occurred in Backbone.View instances: