@proyecto26/animatable-component
Version:
Animate once, use Everywhere! 💫
53 lines (52 loc) • 3.38 kB
JavaScript
import { ANIMATIONS } from './common';
const SLIDE_IN_FWD_DEFAULT = {
easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
fillMode: 'both',
};
const SLIDE_IN_FWD_CENTER = [
Object.assign(Object.assign({ offset: 0 }, SLIDE_IN_FWD_DEFAULT), { transform: 'translateZ(-1400px)', opacity: 0 }),
Object.assign(Object.assign({ offset: 1 }, SLIDE_IN_FWD_DEFAULT), { transform: 'translateZ(0)', opacity: 1 })
];
const SLIDE_IN_FWD_TOP = [
Object.assign(Object.assign({ offset: 0 }, SLIDE_IN_FWD_DEFAULT), { transform: 'translateZ(-1400px) translateY(-100vh)', opacity: 0 }),
Object.assign(Object.assign({ offset: 1 }, SLIDE_IN_FWD_DEFAULT), { transform: 'translateZ(0) translateY(0)', opacity: 1 })
];
const SLIDE_IN_FWD_TR = [
Object.assign(Object.assign({ offset: 0 }, SLIDE_IN_FWD_DEFAULT), { transform: 'translateZ(-1400px) translateY(-100vh) translateX(100vw)', opacity: 0 }),
Object.assign(Object.assign({ offset: 1 }, SLIDE_IN_FWD_DEFAULT), { transform: 'translateZ(0) translateY(0) translateX(0)', opacity: 1 })
];
const SLIDE_IN_FWD_RIGHT = [
Object.assign(Object.assign({ offset: 0 }, SLIDE_IN_FWD_DEFAULT), { transform: 'translateZ(-1400px) translateX(100vw)', opacity: 0 }),
Object.assign(Object.assign({ offset: 1 }, SLIDE_IN_FWD_DEFAULT), { transform: 'translateZ(0) translateX(0)', opacity: 1 })
];
const SLIDE_IN_FWD_BR = [
Object.assign(Object.assign({ offset: 0 }, SLIDE_IN_FWD_DEFAULT), { transform: 'translateZ(-1400px) translateY(100vh) translateX(100vw)', opacity: 0 }),
Object.assign(Object.assign({ offset: 1 }, SLIDE_IN_FWD_DEFAULT), { transform: 'translateZ(0) translateY(0) translateX(0)', opacity: 1 })
];
const SLIDE_IN_FWD_BOTTOM = [
Object.assign(Object.assign({ offset: 0 }, SLIDE_IN_FWD_DEFAULT), { transform: 'translateZ(-1400px) translateY(100vh)', opacity: 0 }),
Object.assign(Object.assign({ offset: 1 }, SLIDE_IN_FWD_DEFAULT), { transform: 'translateZ(0) translateY(0)', opacity: 1 })
];
const SLIDE_IN_FWD_BL = [
Object.assign(Object.assign({ offset: 0 }, SLIDE_IN_FWD_DEFAULT), { transform: 'translateZ(-1400px) translateY(100vh) translateX(-100vw)', opacity: 0 }),
Object.assign(Object.assign({ offset: 1 }, SLIDE_IN_FWD_DEFAULT), { transform: 'translateZ(0) translateY(0) translateX(0)', opacity: 1 })
];
const SLIDE_IN_FWD_LEFT = [
Object.assign(Object.assign({ offset: 0 }, SLIDE_IN_FWD_DEFAULT), { transform: 'translateZ(-1400px) translateX(-100vw)', opacity: 0 }),
Object.assign(Object.assign({ offset: 1 }, SLIDE_IN_FWD_DEFAULT), { transform: 'translateZ(0) translateX(0)', opacity: 1 })
];
const SLIDE_IN_FWD_TL = [
Object.assign(Object.assign({ offset: 0 }, SLIDE_IN_FWD_DEFAULT), { transform: 'translateZ(-1400px) translateY(-100vh) translateX(-100vw)', opacity: 0 }),
Object.assign(Object.assign({ offset: 1 }, SLIDE_IN_FWD_DEFAULT), { transform: 'translateZ(0) translateY(0) translateX(0)', opacity: 1 })
];
export default {
[ANIMATIONS.SLIDE_IN_FWD_CENTER]: SLIDE_IN_FWD_CENTER,
[ANIMATIONS.SLIDE_IN_FWD_TOP]: SLIDE_IN_FWD_TOP,
[ANIMATIONS.SLIDE_IN_FWD_TR]: SLIDE_IN_FWD_TR,
[ANIMATIONS.SLIDE_IN_FWD_RIGHT]: SLIDE_IN_FWD_RIGHT,
[ANIMATIONS.SLIDE_IN_FWD_BR]: SLIDE_IN_FWD_BR,
[ANIMATIONS.SLIDE_IN_FWD_BOTTOM]: SLIDE_IN_FWD_BOTTOM,
[ANIMATIONS.SLIDE_IN_FWD_BL]: SLIDE_IN_FWD_BL,
[ANIMATIONS.SLIDE_IN_FWD_LEFT]: SLIDE_IN_FWD_LEFT,
[ANIMATIONS.SLIDE_IN_FWD_TL]: SLIDE_IN_FWD_TL
};