Janky list animations be damned.

AbsolutelySuperList takes a mostly normal <ul> or <ol> and allows you to insert, remove, rearrange and resize rows in the list with perfect CSS transitions — a feat normally quite difficult to get Just Right™.

This is accomplished by measuring and subsequently absolutely positioning all elements inside, then applying CSS transitions to let the browser handle all the animation. VoilĂ , no jerkiness as elements are added and removed from the DOM in between JavaScript animations.

AbsolutelySuperList was built by Taylor Hughes for Avocado — check it out in action inside our killer shared to-do list for couples.


Like, whoa:


AbsolutelySuperList has been heavily tested in Chrome latest and Firefox 14 and should look super nice. It was also tested lightly in Safari and IE10 in Windows 8, and looks lovely.

It should also function normally in IE8 (probably IE7, too) and older browsers — but without the animations. (Rows snap into place when moved; drag and drop is smooth.)


Github: AbsolutelySuperList

Download: (requires jQuery, tested with 1.7.1.)
   AbsolutelySuperList-0.1.min.js (5.9KB) • AbsolutelySuperList-0.1.js (13.8KB)