UNPKG

@proyecto26/animatable-component

Version:

Animate once, use Everywhere! 💫

proyecto26.github.io/animatable-component

proyecto26/animatable-component

47 lines (46 loc) • 4.77 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
import { ANIMATIONS } from './common'; const TEXT_SHADOW_POP_DEFAULT = { fillMode: 'both' }; const TEXT_SHADOW_POP_TOP = [ Object.assign(Object.assign({ offset: 0 }, TEXT_SHADOW_POP_DEFAULT), { transform: 'translateY(0)', textShadow: '0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555' }), Object.assign(Object.assign({ offset: 1 }, TEXT_SHADOW_POP_DEFAULT), { transform: 'translateY(8px)', textShadow: '0 -1px #555555, 0 -2px #555555, 0 -3px #555555, 0 -4px #555555, 0 -5px #555555, 0 -6px #555555, 0 -7px #555555, 0 -8px #555555' }) ]; const TEXT_SHADOW_POP_TR = [ Object.assign(Object.assign({ offset: 0 }, TEXT_SHADOW_POP_DEFAULT), { transform: 'translateX(0) translateY(0)', textShadow: '0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555' }), Object.assign(Object.assign({ offset: 1 }, TEXT_SHADOW_POP_DEFAULT), { transform: 'translateX(-8px) translateY(8px)', textShadow: '1px -1px #555555, 2px -2px #555555, 3px -3px #555555, 4px -4px #555555, 5px -5px #555555, 6px -6px #555555, 7px -7px #555555, 8px -8px #555555' }) ]; const TEXT_SHADOW_POP_RIGHT = [ Object.assign(Object.assign({ offset: 0 }, TEXT_SHADOW_POP_DEFAULT), { transform: 'translateX(0)', textShadow: '0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555' }), Object.assign(Object.assign({ offset: 1 }, TEXT_SHADOW_POP_DEFAULT), { transform: 'translateX(-8px)', textShadow: '1px 0 #555555, 2px 0 #555555, 3px 0 #555555, 4px 0 #555555, 5px 0 #555555, 6px 0 #555555, 7px 0 #555555, 8px 0 #555555' }) ]; const TEXT_SHADOW_POP_BR = [ Object.assign(Object.assign({ offset: 0 }, TEXT_SHADOW_POP_DEFAULT), { transform: 'translateX(0) translateY(0)', textShadow: '0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555' }), Object.assign(Object.assign({ offset: 1 }, TEXT_SHADOW_POP_DEFAULT), { transform: 'translateX(-8px) translateY(-8px)', textShadow: '1px 1px #555555, 2px 2px #555555, 3px 3px #555555, 4px 4px #555555, 5px 5px #555555, 6px 6px #555555, 7px 7px #555555, 8px 8px #555555' }) ]; const TEXT_SHADOW_POP_BOTTOM = [ Object.assign(Object.assign({ offset: 0 }, TEXT_SHADOW_POP_DEFAULT), { transform: 'translateY(0)', textShadow: '0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555' }), Object.assign(Object.assign({ offset: 1 }, TEXT_SHADOW_POP_DEFAULT), { transform: 'translateY(-8px)', textShadow: '0 1px #555555, 0 2px #555555, 0 3px #555555, 0 4px #555555, 0 5px #555555, 0 6px #555555, 0 7px #555555, 0 8px #555555' }) ]; const TEXT_SHADOW_POP_BL = [ Object.assign(Object.assign({ offset: 0 }, TEXT_SHADOW_POP_DEFAULT), { transform: 'translateX(0) translateY(0)', textShadow: '0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555' }), Object.assign(Object.assign({ offset: 1 }, TEXT_SHADOW_POP_DEFAULT), { transform: 'translateX(8px) translateY(-8px)', textShadow: '-1px 1px #555555, -2px 2px #555555, -3px 3px #555555, -4px 4px #555555, -5px 5px #555555, -6px 6px #555555, -7px 7px #555555, -8px 8px #555555' }) ]; const TEXT_SHADOW_POP_LEFT = [ Object.assign(Object.assign({ offset: 0 }, TEXT_SHADOW_POP_DEFAULT), { transform: 'translateX(0)', textShadow: '0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555' }), Object.assign(Object.assign({ offset: 1 }, TEXT_SHADOW_POP_DEFAULT), { transform: 'translateX(8px)', textShadow: '-1px 0 #555555, -2px 0 #555555, -3px 0 #555555, -4px 0 #555555, -5px 0 #555555, -6px 0 #555555, -7px 0 #555555, -8px 0 #555555' }) ]; const TEXT_SHADOW_POP_TL = [ Object.assign(Object.assign({ offset: 0 }, TEXT_SHADOW_POP_DEFAULT), { transform: 'translateX(0) translateY(0)', textShadow: '0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555' }), Object.assign(Object.assign({ offset: 1 }, TEXT_SHADOW_POP_DEFAULT), { transform: 'translateX(8px) translateY(8px)', textShadow: '-1px -1px #555555, -2px -2px #555555, -3px -3px #555555, -4px -4px #555555, -5px -5px #555555, -6px -6px #555555, -7px -7px #555555, -8px -8px #555555' }) ]; export default { [ANIMATIONS.TEXT_SHADOW_POP_TOP]: TEXT_SHADOW_POP_TOP, [ANIMATIONS.TEXT_SHADOW_POP_TR]: TEXT_SHADOW_POP_TR, [ANIMATIONS.TEXT_SHADOW_POP_RIGHT]: TEXT_SHADOW_POP_RIGHT, [ANIMATIONS.TEXT_SHADOW_POP_BR]: TEXT_SHADOW_POP_BR, [ANIMATIONS.TEXT_SHADOW_POP_BOTTOM]: TEXT_SHADOW_POP_BOTTOM, [ANIMATIONS.TEXT_SHADOW_POP_BL]: TEXT_SHADOW_POP_BL, [ANIMATIONS.TEXT_SHADOW_POP_LEFT]: TEXT_SHADOW_POP_LEFT, [ANIMATIONS.TEXT_SHADOW_POP_TL]: TEXT_SHADOW_POP_TL };