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.
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 @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 . No CCS3 tricks or tweaks like an Halloween nightmare .
Simple and fluid like a butter in summer .