Tag Archives: JavaScript

Animation Stepping with jQuery

If all you need is great JavaScript animation and tweening I recommend using Shifty or one of the other great libraries on MicroJS. They are small, efficient and optimized for high performance. However, if your project is already using jQuery and you want a basic low-level tweening method there is no need to re-create the wheel or import any other library. Everyone is familiar with the jQuery animation method. It goes a little something like this:

It is commonly used for tweening powered by css. This is all well and good, but what if you want to tween a dom element attribute such as viewBox on a SVG element? Well, the animation method can handle that as well. Take a look.

Also, see a working example here. (Works in all modern browsers)

The “duration” is the amount of milliseconds the tween will last. “step” will be called at every step of the tween which is where you will put your animation logic of course, and finally “complete” will be called once the tween if finished. Tween on.


Personal Project: EFF & APR Calculator

This app distinguishes itself in it’s ease of use by instantly calculating rates without having to press extraneous buttons. When negotiating a loan, this can be useful on both sides of the table by allowing the users to convert from APR to Effective rate and back seamlessly and effortlessly.

What The EFF is a simple JavaScript & HTML5 powered converter. This is not the first APR/EFF converter, but it’s definitely the most intuitive. The app makes use of HTML5 caching (you can use it offline), Jasmine testing suite and Shifty. I developed this app specifically for Webkit browser; Chrome & Safari.

Check it out here.