This post originally appeared on the ~~ Trunk Club Tech Blog~~. Some links have been updated to point to their new canonical resource locations.
My team at work is currently porting an e-commerce SPA from an older framework over to Brunch with Panache (BWP), our open source development framework for web clients. Like the old framework, BWP uses both Backbone and CoffeeScript. But to make composing applications easier BWP kicks it up a notch and adds in Chaplin, giving us Collection Views.
One of the downsides with the out-of-the-box Collection Views provided with Chaplin is that they use JavaScript-based animation to fade-in the item views once the collection has been fetched. And while this may be OK for many applications, it’s not ideal for apps with pages which have many collection views, or for mobile user agents in general.
After a quick look through
Chaplin.CollectionView I noticed a property called useCssAnimation. The default value of this property was set to false. Time to search GitHub for some inspiration…
A quick search for "useCssAnimation:" resulted in a number of hits. But
one of them in particular caught my eye, because I recognized it was using a library I’d been experimenting with called
animate.css. And I knew testing it out would be a cinch.
Given BWP is geared for developer productivity, here’s all that was needed to make the switch to use animate.css to replace the JS-based CollectionView animation behavior:
-
With
jake watch:devrunning (and nginx pointing at the app’spublicdirectory) -
Run a
bower install --save animate.css -
Open the
collection-view.coffeeand add the following two properties to the object prototype:useCssAnimation: true # flag to enable use of CSS animations animationStartClass: "animated fadeIn" # provides CSS fade-in animation
Test, commit and that’s it! The project now uses CSS animations to replace the more sluggish and processor intensive JavaScript animations Chaplin provides by default.