Velocity.js for animating Atom.io interface


#1

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 Atom.io’UI is based on an extended jQuery, Velocity.js plays nicely with the interface. Maybe others could add some fancy animated UI elements.


#2

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


#3

Making the panel appears or disappears smoothly:

    height = if @isPaneOpened then 25 else 150
    @isPaneOpened = not @isPaneOpened
    @velocity
      properties:
        height: height
      options:
        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:.