@proyecto26/animatable-component

Version:
Animate once, use Everywhere! 💫
proyecto26.github.io/animatable-component
28 lines (27 loc) • 1.77 kB
JavaScript
import { ANIMATIONS } from './common';
const ROLL_IN_BLURRED_DEFAULT = {
  easing: 'cubic-bezier(0.230, 1.000, 0.320, 1.000)',
  fillMode: 'both'
};
const ROLL_IN_BLURRED_LEFT = [
  Object.assign(Object.assign({ offset: 0 }, ROLL_IN_BLURRED_DEFAULT), { transform: 'translateX(-100vw) rotate(-540deg)', filter: 'blur(50px)', opacity: 0 }),
  Object.assign(Object.assign({ offset: 1 }, ROLL_IN_BLURRED_DEFAULT), { transform: 'translateX(0) rotate(0deg)', filter: 'blur(0)', opacity: 1 })
];
const ROLL_IN_BLURRED_TOP = [
  Object.assign(Object.assign({ offset: 0 }, ROLL_IN_BLURRED_DEFAULT), { transform: 'translateY(-100vh) rotate(-720deg)', filter: 'blur(50px)', opacity: 0 }),
  Object.assign(Object.assign({ offset: 1 }, ROLL_IN_BLURRED_DEFAULT), { transform: 'translateY(0) rotate(0deg)', filter: 'blur(0)', opacity: 1 })
];
const ROLL_IN_BLURRED_RIGHT = [
  Object.assign(Object.assign({ offset: 0 }, ROLL_IN_BLURRED_DEFAULT), { transform: 'translateX(100vw) rotate(720deg)', filter: 'blur(50px)', opacity: 0 }),
  Object.assign(Object.assign({ offset: 1 }, ROLL_IN_BLURRED_DEFAULT), { transform: 'translateX(0) rotate(0deg)', filter: 'blur(0)', opacity: 1 })
];
const ROLL_IN_BLURRED_BOTTOM = [
  Object.assign(Object.assign({ offset: 0 }, ROLL_IN_BLURRED_DEFAULT), { transform: 'translateY(800px) rotate(720deg)', filter: 'blur(50px)', opacity: 0 }),
  Object.assign(Object.assign({ offset: 1 }, ROLL_IN_BLURRED_DEFAULT), { transform: 'translateY(0) rotate(0deg)', filter: 'blur(0)', opacity: 1 })
];
export default {
  [ANIMATIONS.ROLL_IN_BLURRED_LEFT]: ROLL_IN_BLURRED_LEFT,
  [ANIMATIONS.ROLL_IN_BLURRED_TOP]: ROLL_IN_BLURRED_TOP,
  [ANIMATIONS.ROLL_IN_BLURRED_RIGHT]: ROLL_IN_BLURRED_RIGHT,
  [ANIMATIONS.ROLL_IN_BLURRED_BOTTOM]: ROLL_IN_BLURRED_BOTTOM
};