Velocity.js for animating interface


Lately, I’ve created 2 packages, meteor-helper and jade-compile. In the first one, meteor-helper, I was experimenting an animated pane. The animation is done using Velocity.js. As’UI is based on an extended jQuery, Velocity.js plays nicely with the interface. Maybe others could add some fancy animated UI elements.


I’m a sucker for fluid animated UI effects. I’d like to see what comes of this.


Making the panel appears or disappears smoothly:

    height = if @isPaneOpened then 25 else 150
    @isPaneOpened = not @isPaneOpened
        height: height
        duration: 100

Fading it in smoothly:

      # Fade in the pane
      @velocity 'fadeIn', duration: 100

Fading it out smoothly:

      # Fade out the pane before destroying it
      @velocity 'fadeOut', duration: 100

Unbelievably simple :smile:. No CCS3 tricks or tweaks like an Halloween nightmare :japanese_ogre:.

Simple and fluid like a butter in summer :sunny:.