Isotope v1.5 - Hollaback now y'all

20 Oct 2011 · by David DeSandro

Proper callbacks that trigger after animations has been one of oldest lingering issues with Isotope since its release. But fret no more! With yesterday's release of version 1.5, Isotope can callback all over the dance floor. Check out the sweet callback action on this test page.

Like most issue resolutions, I had punted this one for a while because I knew that getting it to work would take a lot of code. I was right. You might think "jQuery has callback integration in just about everything. How hard can it be?" The problem is not so much with jQuery, as it is with triggering a callback with CSS transitions in place. Here's a walkthrough of the logic that had to be put into place just for CSS transition callbacks.

  • Get transition-end event name for browser, i.e. WebkitTransitionEnd. lines 255-261
  • Get transition-duration style property name for browser, i.e. -webkit-transition-duration line 262
  • For the group of elements that will be transitioned, check if one of them actually has a transition duration value greater than 0. lines 652-668
  • If so, bind a callback to that transition-end event for all these elements. line 262
  • Make sure that callback only triggers once. line 637

Even after all of this there is plenty of use cases that will break a callback from triggering with CSS transitions. But hopefully, for the majority of users, their callbacks will trigger right after the animation or transition completes and no one will be the wiser. If you do run into problems with this new feature, help a guy out and submit an issue.