How to use the velocity-animate.Easings function in velocity-animate

To help you get started, we’ve selected a few velocity-animate examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github FabricLabs / fabric / src / VelocityBounce.js View on Github external
const Velocity = require('velocity-animate');

// courtesy of https://github.com/julianshapiro/velocity/issues/283
// We only use easeOutBounce (easeInBounce is just sort of nonsensical)
function bounce( p ) {
    let pow2;
    let bounce = 4;

    while ( p < ( ( pow2 = Math.pow( 2, --bounce ) ) - 1 ) / 11 ) {
        // just sets pow2
    }
    return 1 / Math.pow( 4, 3 - bounce ) - 7.5625 * Math.pow( ( pow2 * 3 - 2 ) / 22 - p, 2 );
}

Velocity.Easings.easeOutBounce = function(p) {
    return 1 - bounce(1 - p);
};
github aurelia / animator-velocity / src / animator.js View on Github external
constructor(container: any) {
    this.container = container || DOM;
    this.easings = Object.assign(velocity.Easings, this.easings);
    this.effects = Object.assign(velocity.Redirects, this.effects);
  }
github znck / vue-slides / packages / @keynote / core / src / transitions / index.js View on Github external
{ opacity: [1, 'easeInSine', 0] },
        { duration: this.duration, complete: done }
      )
    },
    leave(el, done) {
      if (this.skipTransition) return done()
      Velocity(
        el,
        { opacity: [0, 'easeInSine', 1] },
        { duration: this.duration, complete: done }
      )
    }
  }
}

Velocity.Easings.drop = t => {
  if (t < .4) {
    return 1 - 6.25 * t * t
  }
  else if (t < .8) {
    return 0.25 - 6.25 * (t - .6) * (t - .6)
  }
  else {
    return 0.125 - 6.25 * (t - .9) * (t - .9)
  }
}
export const TransitionDrop = {
  extends: Transition,
  props: {
    duration: PropTypes.number.value(1000)
  },
  methods: {
github aurelia / animator-velocity / dist / native-modules / aurelia-animator-velocity.js View on Github external
duration: 400,
      easing: 'linear'
    };
    this.isAnimating = false;
    this.enterAnimation = { properties: ':enter', options: { easing: 'ease-in', duration: 200 } };
    this.leaveAnimation = { properties: ':leave', options: { easing: 'ease-in', duration: 200 } };
    this.easings = [];
    this.effects = {
      ':enter': 'fadeIn',
      ':leave': 'fadeOut',
      ':show': 'fadeIn',
      ':hide': 'fadeOut'
    };

    this.container = container || DOM;
    this.easings = Object.assign(velocity.Easings, this.easings);
    this.effects = Object.assign(velocity.Redirects, this.effects);
  }
github aurelia / animator-velocity / dist / aurelia-animator-velocity.js View on Github external
constructor(container: any) {
    this.container = container || DOM;
    this.easings = Object.assign(velocity.Easings, this.easings);
    this.effects = Object.assign(velocity.Redirects, this.effects);
  }
github aurelia / animator-velocity / dist / es2015 / aurelia-animator-velocity.js View on Github external
duration: 400,
      easing: 'linear'
    };
    this.isAnimating = false;
    this.enterAnimation = { properties: ':enter', options: { easing: 'ease-in', duration: 200 } };
    this.leaveAnimation = { properties: ':leave', options: { easing: 'ease-in', duration: 200 } };
    this.easings = [];
    this.effects = {
      ':enter': 'fadeIn',
      ':leave': 'fadeOut',
      ':show': 'fadeIn',
      ':hide': 'fadeOut'
    };

    this.container = container || DOM;
    this.easings = Object.assign(velocity.Easings, this.easings);
    this.effects = Object.assign(velocity.Redirects, this.effects);
  }