@proyecto26/animatable-component
Version:
Animate once, use Everywhere! 💫
63 lines (62 loc) • 4.18 kB
JavaScript
import { ANIMATIONS } from './common';
const PUFF_IN_DEFAULT = {
easing: 'cubic-bezier(0.470, 0.000, 0.745, 0.715)',
fillMode: 'both'
};
const PUFF_IN_CENTER = [
Object.assign(Object.assign({ offset: 0 }, PUFF_IN_DEFAULT), { transform: 'scale(2)', filter: 'blur(4px)', opacity: 0 }),
Object.assign(Object.assign({ offset: 1 }, PUFF_IN_DEFAULT), { transform: 'scale(1)', filter: 'blur(0)', opacity: 1 })
];
const PUFF_IN_TOP = [
Object.assign(Object.assign({ offset: 0 }, PUFF_IN_DEFAULT), { transform: 'scale(2)', transformOrigin: '50% 0%', filter: 'blur(4px)', opacity: 0 }),
Object.assign(Object.assign({ offset: 1 }, PUFF_IN_DEFAULT), { transform: 'scale(1)', transformOrigin: '50% 0%', filter: 'blur(0)', opacity: 1 })
];
const PUFF_IN_TR = [
Object.assign(Object.assign({ offset: 0 }, PUFF_IN_DEFAULT), { transform: 'scale(2)', transformOrigin: '100% 0%', filter: 'blur(4px)', opacity: 0 }),
Object.assign(Object.assign({ offset: 1 }, PUFF_IN_DEFAULT), { transform: 'scale(1)', transformOrigin: '100% 0%', filter: 'blur(0)', opacity: 1 })
];
const PUFF_IN_RIGHT = [
Object.assign(Object.assign({ offset: 0 }, PUFF_IN_DEFAULT), { transform: 'scale(2)', transformOrigin: '100% 50%', filter: 'blur(4px)', opacity: 0 }),
Object.assign(Object.assign({ offset: 1 }, PUFF_IN_DEFAULT), { transform: 'scale(1)', transformOrigin: '100% 50%', filter: 'blur(0)', opacity: 1 })
];
const PUFF_IN_BR = [
Object.assign(Object.assign({ offset: 0 }, PUFF_IN_DEFAULT), { transform: 'scale(2)', transformOrigin: '100% 100%', filter: 'blur(4px)', opacity: 0 }),
Object.assign(Object.assign({ offset: 1 }, PUFF_IN_DEFAULT), { transform: 'scale(1)', transformOrigin: '100% 100%', filter: 'blur(0)', opacity: 1 })
];
const PUFF_IN_BOTTOM = [
Object.assign(Object.assign({ offset: 0 }, PUFF_IN_DEFAULT), { transform: 'scale(2)', transformOrigin: '50% 100%', filter: 'blur(4px)', opacity: 0 }),
Object.assign(Object.assign({ offset: 1 }, PUFF_IN_DEFAULT), { transform: 'scale(1)', transformOrigin: '50% 100%', filter: 'blur(0)', opacity: 1 })
];
const PUFF_IN_BL = [
Object.assign(Object.assign({ offset: 0 }, PUFF_IN_DEFAULT), { transform: 'scale(2)', transformOrigin: '0% 100%', filter: 'blur(4px)', opacity: 0 }),
Object.assign(Object.assign({ offset: 1 }, PUFF_IN_DEFAULT), { transform: 'scale(1)', transformOrigin: '0% 100%', filter: 'blur(0)', opacity: 1 })
];
const PUFF_IN_LEFT = [
Object.assign(Object.assign({ offset: 0 }, PUFF_IN_DEFAULT), { transform: 'scale(2)', transformOrigin: '0% 50%', filter: 'blur(4px)', opacity: 0 }),
Object.assign(Object.assign({ offset: 1 }, PUFF_IN_DEFAULT), { transform: 'scale(1)', transformOrigin: '0% 50%', filter: 'blur(0)', opacity: 1 })
];
const PUFF_IN_TL = [
Object.assign(Object.assign({ offset: 0 }, PUFF_IN_DEFAULT), { transform: 'scale(2)', transformOrigin: '0% 0%', filter: 'blur(4px)', opacity: 0 }),
Object.assign(Object.assign({ offset: 1 }, PUFF_IN_DEFAULT), { transform: 'scale(1)', transformOrigin: '0% 0%', filter: 'blur(0)', opacity: 1 })
];
const PUFF_IN_HOR = [
Object.assign(Object.assign({ offset: 0 }, PUFF_IN_DEFAULT), { transform: 'scaleX(2)', transformOrigin: 'center center', filter: 'blur(4px)', opacity: 0 }),
Object.assign(Object.assign({ offset: 1 }, PUFF_IN_DEFAULT), { transform: 'scaleX(1)', transformOrigin: 'center center', filter: 'blur(0)', opacity: 1 })
];
const PUFF_IN_VER = [
Object.assign(Object.assign({ offset: 0 }, PUFF_IN_DEFAULT), { transform: 'scaleY(2)', transformOrigin: 'center center', filter: 'blur(4px)', opacity: 0 }),
Object.assign(Object.assign({ offset: 1 }, PUFF_IN_DEFAULT), { transform: 'scaleY(1)', transformOrigin: 'center center', filter: 'blur(0)', opacity: 1 })
];
export default {
[ANIMATIONS.PUFF_IN_CENTER]: PUFF_IN_CENTER,
[ANIMATIONS.PUFF_IN_TOP]: PUFF_IN_TOP,
[ANIMATIONS.PUFF_IN_TR]: PUFF_IN_TR,
[ANIMATIONS.PUFF_IN_RIGHT]: PUFF_IN_RIGHT,
[ANIMATIONS.PUFF_IN_BR]: PUFF_IN_BR,
[ANIMATIONS.PUFF_IN_BOTTOM]: PUFF_IN_BOTTOM,
[ANIMATIONS.PUFF_IN_BL]: PUFF_IN_BL,
[ANIMATIONS.PUFF_IN_LEFT]: PUFF_IN_LEFT,
[ANIMATIONS.PUFF_IN_TL]: PUFF_IN_TL,
[ANIMATIONS.PUFF_IN_HOR]: PUFF_IN_HOR,
[ANIMATIONS.PUFF_IN_VER]: PUFF_IN_VER
};