@proyecto26/animatable-component

Version:
Animate once, use Everywhere! 💫
proyecto26.github.io/animatable-component
28 lines (27 loc) • 1.78 kB
JavaScript
import { ANIMATIONS } from './common';
const TILT_IN_FWD_DEFAULT = {
  easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
  fillMode: 'both'
};
const TILT_IN_FWD_TR = [
  Object.assign(Object.assign({ offset: 0 }, TILT_IN_FWD_DEFAULT), { transform: 'rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg)', opacity: 0 }),
  Object.assign(Object.assign({ offset: 1 }, TILT_IN_FWD_DEFAULT), { transform: 'rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg)', opacity: 1 })
];
const TILT_IN_FWD_BR = [
  Object.assign(Object.assign({ offset: 0 }, TILT_IN_FWD_DEFAULT), { transform: 'rotateY(20deg) rotateX(-35deg) translate(300px, 300px) skew(35deg, -10deg)', opacity: 0 }),
  Object.assign(Object.assign({ offset: 1 }, TILT_IN_FWD_DEFAULT), { transform: 'rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg)', opacity: 1 })
];
const TILT_IN_FWD_BL = [
  Object.assign(Object.assign({ offset: 0 }, TILT_IN_FWD_DEFAULT), { transform: 'rotateY(-20deg) rotateX(-35deg) translate(-300px, 300px) skew(-35deg, 10deg)', opacity: 0 }),
  Object.assign(Object.assign({ offset: 1 }, TILT_IN_FWD_DEFAULT), { transform: 'rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg)', opacity: 1 })
];
const TILT_IN_FWD_TL = [
  Object.assign(Object.assign({ offset: 0 }, TILT_IN_FWD_DEFAULT), { transform: 'rotateY(-20deg) rotateX(35deg) translate(-300px, -300px) skew(35deg, -10deg)', opacity: 0 }),
  Object.assign(Object.assign({ offset: 1 }, TILT_IN_FWD_DEFAULT), { transform: 'rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg)', opacity: 1 })
];
export default {
  [ANIMATIONS.TILT_IN_FWD_TR]: TILT_IN_FWD_TR,
  [ANIMATIONS.TILT_IN_FWD_BR]: TILT_IN_FWD_BR,
  [ANIMATIONS.TILT_IN_FWD_BL]: TILT_IN_FWD_BL,
  [ANIMATIONS.TILT_IN_FWD_TL]: TILT_IN_FWD_TL
};