@proyecto26/animatable-component
Version:
Animate once, use Everywhere! 💫
84 lines (83 loc) • 4.81 kB
JavaScript
import { ANIMATIONS } from './common';
const SCALE_UP_DEFAULT = {
easing: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)',
fillMode: 'both',
transformOrigin: 'center center'
};
const SCALE_UP_CENTER = [
Object.assign(Object.assign({ offset: 0 }, SCALE_UP_DEFAULT), { transform: 'scale(0.5)' }),
Object.assign(Object.assign({ offset: 1 }, SCALE_UP_DEFAULT), { transform: 'scale(1)' })
];
const SCALE_UP_TOP = [
Object.assign(Object.assign({ offset: 0 }, SCALE_UP_DEFAULT), { transform: 'scale(0.5)', transformOrigin: '50% 0%' }),
Object.assign(Object.assign({ offset: 1 }, SCALE_UP_DEFAULT), { transform: 'scale(1)', transformOrigin: '50% 0%' })
];
const SCALE_UP_TR = [
Object.assign(Object.assign({ offset: 0 }, SCALE_UP_DEFAULT), { transform: 'scale(0.5)', transformOrigin: '100% 0%' }),
Object.assign(Object.assign({ offset: 1 }, SCALE_UP_DEFAULT), { transform: 'scale(1)', transformOrigin: '100% 0%' })
];
const SCALE_UP_RIGHT = [
Object.assign(Object.assign({ offset: 0 }, SCALE_UP_DEFAULT), { transform: 'scale(0.5)', transformOrigin: '100% 50%' }),
Object.assign(Object.assign({ offset: 1 }, SCALE_UP_DEFAULT), { transform: 'scale(1)', transformOrigin: '100% 50%' })
];
const SCALE_UP_BR = [
Object.assign(Object.assign({ offset: 0 }, SCALE_UP_DEFAULT), { transform: 'scale(0.5)', transformOrigin: '100% 100%' }),
Object.assign(Object.assign({ offset: 1 }, SCALE_UP_DEFAULT), { transform: 'scale(1)', transformOrigin: '100% 100%' })
];
const SCALE_UP_BOTTOM = [
Object.assign(Object.assign({ offset: 0 }, SCALE_UP_DEFAULT), { transform: 'scale(0.5)', transformOrigin: '50% 100%' }),
Object.assign(Object.assign({ offset: 1 }, SCALE_UP_DEFAULT), { transform: 'scale(1)', transformOrigin: '50% 100%' })
];
const SCALE_UP_BL = [
Object.assign(Object.assign({ offset: 0 }, SCALE_UP_DEFAULT), { transform: 'scale(0.5)', transformOrigin: '0% 100%' }),
Object.assign(Object.assign({ offset: 1 }, SCALE_UP_DEFAULT), { transform: 'scale(1)', transformOrigin: '0% 100%' })
];
const SCALE_UP_LEFT = [
Object.assign(Object.assign({ offset: 0 }, SCALE_UP_DEFAULT), { transform: 'scale(0.5)', transformOrigin: '0% 50%' }),
Object.assign(Object.assign({ offset: 1 }, SCALE_UP_DEFAULT), { transform: 'scale(1)', transformOrigin: '0% 50%' })
];
const SCALE_UP_TL = [
Object.assign(Object.assign({ offset: 0 }, SCALE_UP_DEFAULT), { transform: 'scale(0.5)', transformOrigin: '0% 0%' }),
Object.assign(Object.assign({ offset: 1 }, SCALE_UP_DEFAULT), { transform: 'scale(1)', transformOrigin: '0% 0%' })
];
const SCALE_UP_HOR_CENTER = [
Object.assign(Object.assign({ offset: 0 }, SCALE_UP_DEFAULT), { transform: 'scaleX(0.4)' }),
Object.assign(Object.assign({ offset: 1 }, SCALE_UP_DEFAULT), { transform: 'scaleX(1)' })
];
const SCALE_UP_HOR_LEFT = [
Object.assign(Object.assign({ offset: 0 }, SCALE_UP_DEFAULT), { transform: 'scaleX(0.4)', transformOrigin: '0% 0%' }),
Object.assign(Object.assign({ offset: 1 }, SCALE_UP_DEFAULT), { transform: 'scaleX(1)', transformOrigin: '0% 0%' })
];
const SCALE_UP_HOR_RIGHT = [
Object.assign(Object.assign({ offset: 0 }, SCALE_UP_DEFAULT), { transform: 'scaleX(0.4)', transformOrigin: '100% 100%' }),
Object.assign(Object.assign({ offset: 1 }, SCALE_UP_DEFAULT), { transform: 'scaleX(1)', transformOrigin: '100% 100%' })
];
const SCALE_UP_VER_CENTER = [
Object.assign(Object.assign({ offset: 0 }, SCALE_UP_DEFAULT), { transform: 'scaleY(0.4)' }),
Object.assign(Object.assign({ offset: 1 }, SCALE_UP_DEFAULT), { transform: 'scaleY(1)' })
];
const SCALE_UP_VER_TOP = [
Object.assign(Object.assign({ offset: 0 }, SCALE_UP_DEFAULT), { transform: 'scaleY(0.4)', transformOrigin: '100% 0%' }),
Object.assign(Object.assign({ offset: 1 }, SCALE_UP_DEFAULT), { transform: 'scaleY(1)', transformOrigin: '100% 0%' })
];
const SCALE_UP_VER_BOTTOM = [
Object.assign(Object.assign({ offset: 0 }, SCALE_UP_DEFAULT), { transform: 'scaleY(0.4)', transformOrigin: '0% 100%' }),
Object.assign(Object.assign({ offset: 1 }, SCALE_UP_DEFAULT), { transform: 'scaleY(1)', transformOrigin: '0% 100%' })
];
export default {
[ANIMATIONS.SCALE_UP_CENTER]: SCALE_UP_CENTER,
[ANIMATIONS.SCALE_UP_TOP]: SCALE_UP_TOP,
[ANIMATIONS.SCALE_UP_TR]: SCALE_UP_TR,
[ANIMATIONS.SCALE_UP_RIGHT]: SCALE_UP_RIGHT,
[ANIMATIONS.SCALE_UP_BR]: SCALE_UP_BR,
[ANIMATIONS.SCALE_UP_BOTTOM]: SCALE_UP_BOTTOM,
[ANIMATIONS.SCALE_UP_BL]: SCALE_UP_BL,
[ANIMATIONS.SCALE_UP_LEFT]: SCALE_UP_LEFT,
[ANIMATIONS.SCALE_UP_TL]: SCALE_UP_TL,
[ANIMATIONS.SCALE_UP_HOR_CENTER]: SCALE_UP_HOR_CENTER,
[ANIMATIONS.SCALE_UP_HOR_LEFT]: SCALE_UP_HOR_LEFT,
[ANIMATIONS.SCALE_UP_HOR_RIGHT]: SCALE_UP_HOR_RIGHT,
[ANIMATIONS.SCALE_UP_VER_CENTER]: SCALE_UP_VER_CENTER,
[ANIMATIONS.SCALE_UP_VER_TOP]: SCALE_UP_VER_TOP,
[ANIMATIONS.SCALE_UP_VER_BOTTOM]: SCALE_UP_VER_BOTTOM
};