my 2 cents

Yesterday I had a short discussion with a colleague of our front-end/website team. We had a look a gallery implementation made in JQuery.  He wanted to have a similar animation like the rezise/move/fadeout animation when an image gets clicked in this gallery.

The question was how hard it would be to implement such an animation. My short answer was: “I guess this is about 5 lines of code”. Well, I have never worked with JQuery and animation in general, and after looking into the code I realized, that JQuery seems to differ conceptually a lot from ExtJS.

However a few weeks ago I roughly scanned the docs of Ext.Fx. This is a small but very powerful Effect class in ExtJS. Many people think, ExtJS is ‘just’ suited for Web-Apps with a look similar to the Tine 2.0 look. But this is not the whole truth. ExtJS is also a general purpose JS Library with also comes with great animation and effects support.

As you can see bellow, I couldn’t resist to implement a spacegallery using ExtJS. The code for all animations, not only the animation of the top Image, is just 4 Lines of code:

onImageClick: function(e, dom) {
this.imageEls[0].shift(this.fadeOutPerspectiveData);
for(var n=1; n this.imageEls[n].shift(this.perspectiveData[n-1]);
}
this.cycleStack();
},

Ok, it's a matter of interpretation if you count the single "}" line .