The JavaScript blog.


ui animations spreadsheets excel

ExcelJS, Material Refresh

Posted on .


ExcelJS (GitHub: guyonroche/exceljs, License: MIT, npm: exceljs) by Guyon Roche is a module for converting Excel spreadsheets to styles and JSON. It was created by reverse engineering Excel files into pure JavaScript, so if you look at the source it's surprisingly readable. Everything is split up into modules, and simple classes are used to model the main entities in Excel documents.

For example, the cell.js file defines a Cell object that has methods for addressing the cell and manipulating styles. This is then used to build data types like StringValue and DateValue.

It can read and write Excel, and it handles functions, links, fonts, borders, alignments, and fills. Here's the author's example of reading an Excel file:

var workbook = new Excel.Workbook();  
  .then(function() {
    // use workbook

// pipe from stream
var workbook = new Excel.Workbook();  

If you're interested in Excel, then also check out js-xls and SheetJS.

Material Refresh

Material Refresh (GitHub: lightningtgc/material-refresh, License: MIT, npm: material-refresh) by gctang is a Material Design pull/swipe to refresh library. It has several modes of display: above surface, below surface, and button.

I tried it out on a mobile device and the animations seemed very smooth. To use the library, set it up by calling mRefresh and then mRefresh.resolve() to hide the spinner.


libraries animations

Gifshot, Cquence.js

Posted on .



Gitshot (GitHub: yahoo/gifshot, License: MIT) by Chase West and Greg Franko at Yahoo Sports is a library for creating animated GIFs from video streams or images. It's client-side and uses Web Workers, so you can use it with existing sites without too much server-side work. To generate GIFs themselves it uses lots of modern APIs, like WebRTC, FileSystem, Video, Canvas, Web Workers, and (everyone's favourite!) Typed Arrays.

Gifshot is ideal for adding overlays to animations, or for extracting thumbnails from videos. You could capture footage from the webcam and share it to users as part of a chat service or game, for example. It comes with a demo that uses Node, so you can easily see the kinds of options it supports.

The basic API is just gifshot.createGIF, which accepts an options object that specifies the type of content. For example, generating a GIF from a video stream can be done with gifshot.createGIF({ video: ['example.mp4', 'example.ogv'] }).


Cquence.js by Ramon Gebben (GitHub: RamonGebben/Cquence, License: MIT) is a small animation library. The author developed it for advertising banners, and it has an interesting compositional style:

var render = combine(  
    linear('frame3', 10000, { left: -900 }, { left: 300 })
    easeOut('frame1', 2000, { left: -1000 }, { left: 120 }),
    // ...

It goes against that "globals are bad" API style, but it would be possible to repackage it as a CommonJS module. It uses requestAnimationFrame and has older IE support for opacity.

There's a demo that demonstrates the kind of sequential animations you can build up with it.


jquery ui animations

Velocity UI Pack

Posted on .

Julian Shapiro has announced the Velocity UI Pack. There's a screencast that introduces the effects and how to use them.

This is an additional dependency for the Velocity.js library, which is a performance-focused jQuery plugin that improves on $.animate(). With the Velocity UI Pack you can perform animations on sets of elements, which is ideal for drawing attention to content as it's loaded using Ajax.

It supports a stagger option which adds a delay after each animation. Given a set of elements, you can apply an animation in sequence simply by using $divs.velocity('callout.shake', { stagger: 75 }). If you're loading an array of records using Ajax, then you can render the resulting elements and display them with .velocity('anim', { stagger: time }).

One thing that I like about this library is the animations don't result in blurry text. Julian has gone to a lot of trouble to make it easy to use and fast, so it's worth checking out the demo and the screencast.


animations angular d3

Cammy and n3-charts

Posted on .

Cammy's demo.

Cammy (GitHub: lorem--ipsum / cammy, License: MIT) by Sébastien Fragnaud ("lorem--ipsum") is an orthogonal projection camera built on AngularJS and D3.js. The demo is completely gorgeous, so I was compelled to waste a good 15 minutes playing with it. If you look at the source you can see how the Angular directives are used to hook up the UI controls with the renderer.

Sébastien also wrote n3-charts (GitHub: n3-charts / line-chart):

$scope.options = {
  axes: {
    x: {
      key: 'x',
      labelFunction: function(value) { return value; },
      type: 'linear',
      tooltipFormatter: function(x) { return x; }
    y: { type: 'linear' },
    y2: { type: 'linear' }
  series: [{
    y: 'value',
    color: 'steelblue',
    thickness: '2px',
    type: 'area',
    striped: true,
    label: 'Pouet'
  }, {
    y: 'otherValue',
    axis: 'y2',
    color: 'lightsteelblue'
  lineMode: 'linear',
  tension: 0.7


jquery animations


Posted on .

From the Velocity Playground teaser.

Julian Shapiro sent in Velocity.js (GitHub: julianshapiro / velocity, License: MIT), a performance-focused animation library that is an alternative to jQuery's $.animate method. If you're struggling with CSS animations and would prefer to use JavaScript, then Velocity may help. Judging by the project's Playground teaser, it seems like it's more ambitious than just supporting basic animations, however.

Basic animation works as you'd expect if you've used $.animate:

$('div').velocity({ top: 50 });

You can supply additional arguments:

$('div').velocity({ opacity: 1 }, { duration: 1000 });

Easing and queues are also supported:

  borderBottomWidth: ['2px', 'spring' ],
  width: '100px',
  height: '100px'
}, {
  easing: 'easeInSine'

The documentation has more examples. The source has some useful comments about how the project works, and why it's fast:

JavaScript and jQuery are falsely conflated. JavaScript animation, which Velocity uses, is fast; it's jQuery that's slow. Although Velocity is a jQuery plugin, it uses its own animation stack that delivers its performance through two underlying design principles: 1) synchronize the DOM → tween stack to minimize layout thrashing, and 2) cache values to minimize the occurrence of DOM querying.

There's also a post about Velocity on the David Walsh Blog, and the author is promising more features and tests by May 5th.