Volicty.js - custom UI Pack animations

velocity-ui-animations.js

// Softly bounce up from bottom of object's height and fade in
$.Velocity.RegisterUI('transition.flyUpIn', {
  defaultDuration: 600,
  calls: [
    [{ translateY: [ 0, '100%' ]}, 1, { easing: [ .28,1.47,.48,.96 ] }]
  ]
});


// fade text up and in for erin.io hero section
$.Velocity.RegisterUI('transition.flyUpIn', {
    defaultDuration: 400,
    calls: [
      [{ translateY: [ 0, '100px' ], opacity: 1}, 1, { easing: 'easeOutQuart' }]
    ]
});


// fade text left and out for erin.io hero section
$.Velocity.RegisterUI('transition.flyLeftOut', {
    defaultDuration: 200,
    calls: [
      [{ translateX: [ '-200px', 0 ], opacity: 0}, 1, { easing: 'easeInQuint' }]
    ],
    reset: { translateX: 0 }
});