anim-3d-obj 1.2.9 → 1.2.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/README.md +2 -2
  2. package/package.json +1 -1
  3. package/dist/cjs/components/Face.d.ts +0 -11
  4. package/dist/cjs/components/Face.js +0 -107
  5. package/dist/cjs/components/Obj.d.ts +0 -2
  6. package/dist/cjs/components/Obj.js +0 -31
  7. package/dist/cjs/components/index.d.ts +0 -2
  8. package/dist/cjs/components/index.js +0 -18
  9. package/dist/cjs/components/styles/AnimWrap.d.ts +0 -2
  10. package/dist/cjs/components/styles/AnimWrap.js +0 -90
  11. package/dist/cjs/components/styles/Anims.d.ts +0 -32
  12. package/dist/cjs/components/styles/Anims.js +0 -329
  13. package/dist/cjs/components/styles/Global.d.ts +0 -6
  14. package/dist/cjs/components/styles/Global.js +0 -27
  15. package/dist/cjs/components/styles/Scene.d.ts +0 -10
  16. package/dist/cjs/components/styles/Scene.js +0 -22
  17. package/dist/cjs/index.d.ts +0 -1
  18. package/dist/cjs/index.js +0 -17
  19. package/dist/esm/components/Face.d.ts +0 -11
  20. package/dist/esm/components/Face.js +0 -101
  21. package/dist/esm/components/Obj.d.ts +0 -2
  22. package/dist/esm/components/Obj.js +0 -25
  23. package/dist/esm/components/index.d.ts +0 -2
  24. package/dist/esm/components/index.js +0 -2
  25. package/dist/esm/components/styles/AnimWrap.d.ts +0 -2
  26. package/dist/esm/components/styles/AnimWrap.js +0 -83
  27. package/dist/esm/components/styles/Anims.d.ts +0 -32
  28. package/dist/esm/components/styles/Anims.js +0 -325
  29. package/dist/esm/components/styles/Global.d.ts +0 -6
  30. package/dist/esm/components/styles/Global.js +0 -20
  31. package/dist/esm/components/styles/Scene.d.ts +0 -10
  32. package/dist/esm/components/styles/Scene.js +0 -15
  33. package/dist/esm/index.d.ts +0 -1
  34. package/dist/esm/index.js +0 -1
package/README.md CHANGED
@@ -4,13 +4,13 @@ This project allows a user to create Cuboids of any size simply by entering a se
4
4
  The program does the leg work with regard to calculating translationZ depth and config on the fly.
5
5
 
6
6
  ## Examples
7
-
7
+ - [Obj Skeleton](https://codesandbox.io/s/anim-3d-obj-skeleton-5dlk70)
8
8
  - [6 sided Cuboid - animate X360 Y360](https://codesandbox.io/s/anim-3d-obj-all-sides-simple-bf67yg-tzr2v6)
9
9
  - [3 sided Object - animate y-axis](https://codesandbox.io/s/anim-3d-obj-3-sides-wobble-y-axis-wglkms)
10
10
  - [Double box spin](https://codesandbox.io/s/react-anim-3d-double-box-spin-vbdhg2)
11
11
  - [Floating Ribbon](https://codesandbox.io/s/cocky-butterfly-ygwkps)
12
12
  - [Parallel divs animated x and y axis in tandem](https://codesandbox.io/s/anim-3d-obj-2-sides-simple-4057y7)
13
- - [Obj Skeleton](https://codesandbox.io/s/anim-3d-obj-skeleton-5dlk70)
13
+
14
14
 
15
15
  `** ANIMATIONS`
16
16
 
package/package.json CHANGED
@@ -6,7 +6,7 @@
6
6
  "url": "https://github.com/mdnelles/anim-3d-obj-npm-publisher.git"
7
7
  },
8
8
  "homepage": "https://mdnelles.github.io/a3o-playground",
9
- "version": "1.2.9",
9
+ "version": "1.2.10",
10
10
  "description": "React library for creating 3D objects quickly. Also these objects can be animated",
11
11
  "main": "dist/cjs/index.js",
12
12
  "module": "dist/esm/index.js",
@@ -1,11 +0,0 @@
1
- import { FaceType } from "./types";
2
- interface FaceProps {
3
- children?: any;
4
- depth?: number | any;
5
- face: FaceType;
6
- global?: any;
7
- height?: number | string;
8
- width?: number | string;
9
- }
10
- export default function Face(props: FaceProps): JSX.Element;
11
- export {};
@@ -1,107 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- const react_1 = __importDefault(require("react"));
7
- const styled_components_1 = __importDefault(require("styled-components"));
8
- function Face(props) {
9
- let display = true;
10
- let { depth = 10, global = { css: "", body: "" }, height = 10, face, width = 100, } = props;
11
- let transform;
12
- let tranz = +height / 2;
13
- const body = face.body ? face.body : global.body;
14
- ////////////////////////////////////////////////////////////////////////////// BOTTOM
15
- if (face.name === "bottom") {
16
- tranz = +height - +depth / 2;
17
- height = +depth;
18
- transform = `transform: rotateX(-90deg) translateZ(${tranz}px);`;
19
- }
20
- else if (face.name === "bottom_rear") {
21
- tranz = +height - +depth / 2;
22
- height = +depth;
23
- transform = `transform: rotateX(-90deg) translateZ(${tranz}px) translateY(${height}px) `;
24
- }
25
- else if (face.name === "bottom_front") {
26
- tranz = +height - +depth / 2;
27
- height = +depth;
28
- transform = `transform: rotateX(-90deg) translateZ(${tranz}px) translateY(${-height}px) `;
29
- ////////////////////////////////////////////////////////////////////////////// TOPS
30
- }
31
- else if (face.name === "top") {
32
- height = +depth;
33
- if (!!depth)
34
- tranz = +depth / 2;
35
- transform = `transform: rotateX(90deg) translateZ(${tranz}px);`;
36
- }
37
- else if (face.name === "top_rear") {
38
- height = +depth;
39
- if (!!depth)
40
- tranz = +depth / 2;
41
- let offset = depth / 2;
42
- //translate3d(tx, ty, tz)
43
- transform = `transform: rotateX(90deg) translateZ(${tranz}px) translateY(-${tranz * 2}px) `;
44
- }
45
- else if (face.name === "top_front") {
46
- height = +depth;
47
- if (!!depth)
48
- tranz = +depth / 2;
49
- let offset = depth / 2;
50
- //translate3d(tx, ty, tz)
51
- transform = `transform: rotateX(90deg) translateZ(${tranz}px) translateY(${tranz * 2}px) `;
52
- }
53
- else if (face.name === "front") {
54
- if (!!depth)
55
- tranz = +depth / 2;
56
- transform = `transform: rotateY(0deg) translateZ(${tranz}px);`;
57
- }
58
- else if (face.name === "back") {
59
- if (!!depth)
60
- tranz = +depth / 2;
61
- transform = `transform: rotateY(180deg) translateZ(${tranz}px);`;
62
- }
63
- else if (face.name === "right") {
64
- if (height > width && !depth) {
65
- tranz = -(+height / 2 - +width);
66
- width = +height;
67
- }
68
- else if (width > height && !depth) {
69
- tranz = +height / 2;
70
- height = +width;
71
- }
72
- else {
73
- tranz = +width - +depth / 2;
74
- width = +depth;
75
- }
76
- transform = `transform: rotateY(90deg) translateZ(${tranz}px);`;
77
- // topr is to of Ribbon which points back
78
- }
79
- else if (face.name === "left") {
80
- if (height > width && !depth) {
81
- tranz = -(+height / 2 - +width);
82
- width = +height;
83
- }
84
- else if (width > height && !depth) {
85
- tranz = +height / 2;
86
- height = +width;
87
- }
88
- else {
89
- tranz = +depth / 2;
90
- width = +depth;
91
- }
92
- transform = `transform: rotateY(-90deg) translateZ(${tranz}px);`;
93
- }
94
- else {
95
- //console.log(face.name + " is not a recognized face.name");
96
- display = false;
97
- }
98
- const Specs = styled_components_1.default.section `
99
- ${face.css || global.css}
100
- width: ${width}px;
101
- position: absolute;
102
- height: ${height}px;
103
- ${transform}
104
- `;
105
- return display ? react_1.default.createElement(Specs, null, body) : react_1.default.createElement(react_1.default.Fragment, null);
106
- }
107
- exports.default = Face;
@@ -1,2 +0,0 @@
1
- import { ObjProps } from "./types";
2
- export default function (props: ObjProps): JSX.Element;
@@ -1,31 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- const react_1 = __importDefault(require("react"));
7
- const Global_1 = require("./styles/Global");
8
- const AnimWrap_1 = require("./styles/AnimWrap");
9
- const Scene_1 = require("./styles/Scene");
10
- const Face_1 = __importDefault(require("./Face"));
11
- function default_1(props) {
12
- let { anim1, anim2, width = 5, height = 5, depth = 5, global = {}, faces, perspective, perspectiveOrigin, zIndex, } = props;
13
- // process config
14
- const buildFace = (face) => {
15
- const details = {
16
- width,
17
- height,
18
- depth,
19
- face,
20
- global,
21
- };
22
- return react_1.default.createElement(Face_1.default, Object.assign({}, details, { key: face.name }));
23
- };
24
- return (react_1.default.createElement(Scene_1.SceneStyle, { width: width, height: height, perspective: perspective, perspectiveOrigin: perspectiveOrigin, zIndex: zIndex },
25
- react_1.default.createElement(AnimWrap_1.AnimWrap, { animSpecs: anim1 },
26
- react_1.default.createElement(AnimWrap_1.AnimWrap, { animSpecs: anim2 },
27
- react_1.default.createElement(Global_1.ObjWrapper, null, faces && faces[0]
28
- ? faces.map((face) => (face.name ? buildFace(face) : null))
29
- : null)))));
30
- }
31
- exports.default = default_1;
@@ -1,2 +0,0 @@
1
- export * from "./Obj";
2
- export * from "./Face";
@@ -1,18 +0,0 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
- for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
- };
16
- Object.defineProperty(exports, "__esModule", { value: true });
17
- __exportStar(require("./Obj"), exports);
18
- __exportStar(require("./Face"), exports);
@@ -1,2 +0,0 @@
1
- import { AnimStylesProps } from "./Anim";
2
- export declare const AnimWrap: (props: AnimStylesProps) => JSX.Element;
@@ -1,90 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.AnimWrap = void 0;
7
- const styled_components_1 = __importDefault(require("styled-components"));
8
- const react_1 = __importDefault(require("react"));
9
- const Anims_1 = require("./Anims");
10
- const AnimWrap = (props) => {
11
- const { children, animSpecs } = props;
12
- const AS = animSpecs;
13
- const { X360, Y360, fadeInkf, wobY, wobX, fwdx018, fwdx1836, fwdx09, fwdx918, fwdx1827, fwdx2736, fwdy018, fwdy1836, fwdy09, fwdy918, fwdy1827, fwdy2736, floatX, floatShadow, pulseSM, pulseMD, pulseLG, swing, swingDecay, noAnim, } = (0, Anims_1.allAnims)({ degreesHi: AS.degreesHi, degreesLow: AS.degreesLow });
14
- let theAnim = "noAnim";
15
- if (AS.name === "X360")
16
- theAnim = X360;
17
- else if (AS.name === "Y360")
18
- theAnim = Y360;
19
- else if (AS.name === "fadeInkf")
20
- theAnim = fadeInkf;
21
- else if (AS.name === "wobX")
22
- theAnim = wobX;
23
- else if (AS.name === "wobY")
24
- theAnim = wobY;
25
- else if (AS.name === "fwdx018")
26
- theAnim = fwdx018;
27
- else if (AS.name === "fwdx1836")
28
- theAnim = fwdx1836;
29
- else if (AS.name === "fwdx09")
30
- theAnim = fwdx09;
31
- else if (AS.name === "fwdx918")
32
- theAnim = fwdx918;
33
- else if (AS.name === "fwdx1827")
34
- theAnim = fwdx1827;
35
- else if (AS.name === "fwdx2736")
36
- theAnim = fwdx2736;
37
- else if (AS.name === "fwdy018")
38
- theAnim = fwdy018;
39
- else if (AS.name === "fwdy1836")
40
- theAnim = fwdy1836;
41
- else if (AS.name === "fwdy09")
42
- theAnim = fwdy09;
43
- else if (AS.name === "fwdy918")
44
- theAnim = fwdy918;
45
- else if (AS.name === "fwdy1827")
46
- theAnim = fwdy1827;
47
- else if (AS.name === "fwdy2736")
48
- theAnim = fwdy2736;
49
- else if (AS.name === "floatX")
50
- theAnim = floatX;
51
- else if (AS.name === "floatShadow")
52
- theAnim = floatShadow;
53
- else if (AS.name === "pulseSM")
54
- theAnim = pulseSM;
55
- else if (AS.name === "pulseMD")
56
- theAnim = pulseMD;
57
- else if (AS.name === "pulseLG")
58
- theAnim = pulseLG;
59
- else if (AS.name === "swing")
60
- theAnim = swing;
61
- else if (AS.name === "swingDecay")
62
- theAnim = swingDecay;
63
- else
64
- theAnim = noAnim;
65
- const AnimWrapDiv = styled_components_1.default.div `
66
- width: 100%;
67
- height: 100%;
68
- position: relative;
69
- transform-style: preserve-3d;
70
- border: ${AS.border};
71
- -webkit-animation-duration: ${AS.duration}s;
72
- animation-duration: ${AS.duration}s;
73
- -webkit-animation-iteration-count: ${AS.iterationCount};
74
- animation-iteration-count: ${AS.iterationCount};
75
- -webkit-animation-name: ${theAnim};
76
- animation-name: ${theAnim};
77
- -webkit-animation-fill-mode: ${AS.fillMode};
78
- animation-fill-mode: ${AS.fillMode};
79
- -webkit-animation-play-state: ${AS.animationPlayState};
80
- animation-play-state: ${AS.animationPlayState};
81
- animation-direction: ${AS.direction};
82
- -webkit-animation-direction: ${AS.direction};
83
- -webkit-animation-timing-function: ${AS.timing};
84
- animation-timing-function: ${AS.timing};
85
- -webkit-animation-delay: ${AS.delay}s;
86
- animation-delay: ${AS.delay}s;
87
- `;
88
- return react_1.default.createElement(AnimWrapDiv, null, children);
89
- };
90
- exports.AnimWrap = AnimWrap;
@@ -1,32 +0,0 @@
1
- interface AllAnimsProps {
2
- degreesLow?: number;
3
- degreesHi?: number;
4
- }
5
- export declare const allAnims: (props: AllAnimsProps) => {
6
- X360: import("styled-components").Keyframes;
7
- Y360: import("styled-components").Keyframes;
8
- fadeInkf: import("styled-components").Keyframes;
9
- wobY: import("styled-components").Keyframes;
10
- wobX: import("styled-components").Keyframes;
11
- fwdx018: import("styled-components").Keyframes;
12
- fwdx1836: import("styled-components").Keyframes;
13
- fwdx09: import("styled-components").Keyframes;
14
- fwdx918: import("styled-components").Keyframes;
15
- fwdx1827: import("styled-components").Keyframes;
16
- fwdx2736: import("styled-components").Keyframes;
17
- fwdy018: import("styled-components").Keyframes;
18
- fwdy1836: import("styled-components").Keyframes;
19
- fwdy09: import("styled-components").Keyframes;
20
- fwdy918: import("styled-components").Keyframes;
21
- fwdy1827: import("styled-components").Keyframes;
22
- fwdy2736: import("styled-components").Keyframes;
23
- floatX: import("styled-components").Keyframes;
24
- floatShadow: import("styled-components").Keyframes;
25
- pulseSM: import("styled-components").Keyframes;
26
- pulseMD: import("styled-components").Keyframes;
27
- pulseLG: import("styled-components").Keyframes;
28
- swing: import("styled-components").Keyframes;
29
- swingDecay: import("styled-components").Keyframes;
30
- noAnim: import("styled-components").Keyframes;
31
- };
32
- export {};
@@ -1,329 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.allAnims = void 0;
4
- const styled_components_1 = require("styled-components");
5
- const allAnims = (props) => {
6
- const { degreesLow = 0, degreesHi = 0 } = props;
7
- const swing = (0, styled_components_1.keyframes) `
8
- 0% {
9
- -webkit-transform-origin: top;
10
- -ms-transform-origin: top;
11
- transform-origin: top;
12
- -webkit-transform: perspective(550px) rotateX(77deg);
13
- transform: perspective(550px) rotateX(77deg);
14
- }
15
- 50% {
16
- -webkit-transform: perspective(550px) rotateX(-77deg);
17
- transform: perspective(550px) rotateX(-77deg);
18
- }
19
- 100% {
20
- -webkit-transform-origin: top;
21
- -ms-transform-origin: top;
22
- transform-origin: top;
23
- -webkit-transform: perspective(550px) rotateX(77deg);
24
- transform: perspective(550px) rotateX(77deg);
25
- }
26
- `;
27
- const swingDecay = (0, styled_components_1.keyframes) `
28
- 0% {
29
- -webkit-transform-origin: top;
30
- -ms-transform-origin: top;
31
- transform-origin: top;
32
- -webkit-transform: perspective(550px) rotateX(77deg);
33
- transform: perspective(550px) rotateX(77deg);
34
- }
35
- 20% {
36
- -webkit-transform: perspective(550px) rotateX(-55deg);
37
- transform: perspective(550px) rotateX(-55deg);
38
- }
39
- 40% {
40
- -webkit-transform: perspective(550px) rotateX(44deg);
41
- transform: perspective(550px) rotateX(44deg);
42
- }
43
-
44
- 60% {
45
- -webkit-transform: perspective(550px) rotateX(-22deg);
46
- transform: perspective(550px) rotateX(-22deg);
47
- }
48
-
49
- 80% {
50
- -webkit-transform: perspective(550px) rotateX(11deg);
51
- transform: perspective(550px) rotateX(11deg);
52
- }
53
- 100% {
54
- -webkit-transform-origin: top;
55
- -ms-transform-origin: top;
56
- transform-origin: top;
57
- -webkit-transform: perspective(550px) rotateX(0);
58
- transform: perspective(550px) rotateX(0);
59
- }
60
- `;
61
- const X360 = (0, styled_components_1.keyframes) `
62
- from {
63
- -webkit-transform: rotateX(360deg);
64
- transform: rotateX(360deg);
65
- }
66
- to {
67
- -webkit-transform: rotateX(0deg);
68
- transform: rotateX(0deg);
69
- }`;
70
- //////// Y360
71
- const Y360 = (0, styled_components_1.keyframes) `
72
- from {
73
- -webkit-transform: rotateY(360deg);
74
- transform: rotateY(360deg);
75
- }
76
- to {
77
- -webkit-transform: rotateY(0deg);
78
- transform: rotateY(0deg);
79
- }`;
80
- const fadeInkf = (0, styled_components_1.keyframes) `
81
- from {
82
- opacity: 0;
83
- }
84
- to {
85
- opacity: 1;
86
- }`;
87
- const wobY = (0, styled_components_1.keyframes) `
88
- 0% {
89
- -webkit-transform: rotateY(${degreesLow}deg);
90
- transform: rotateY(${degreesLow}deg);
91
- }
92
- 50% {
93
- -webkit-transform: rotateY(${degreesHi}deg);
94
- transform: rotateY(${degreesHi}deg);
95
- }
96
- 100% {
97
- -webkit-transform: rotateY(${degreesLow}deg);
98
- transform: rotateY(${degreesLow}deg);
99
- }`;
100
- const wobX = (0, styled_components_1.keyframes) `
101
- 0% {
102
- -webkit-transform: rotateX(${degreesLow}deg);
103
- transform: rotateX(${degreesLow}deg);
104
- }
105
- 50% {
106
- -webkit-transform: rotateX(${degreesHi}deg);
107
- transform: rotateX(${degreesHi}deg);
108
- }
109
- 100% {
110
- -webkit-transform: rotateX(${degreesLow}deg);
111
- transform: rotateX(${degreesLow}deg);
112
- }`;
113
- /* ============================== x-axis 0-180 >180 - 360 */
114
- const fwdx018 = (0, styled_components_1.keyframes) `
115
- from {
116
- -webkit-transform: rotateX(360deg);
117
- transform: rotateX(360deg);
118
- }
119
- to {
120
- -webkit-transform: rotateX(180deg);
121
- transform: rotateX(180deg);
122
- }`;
123
- const fwdx1836 = (0, styled_components_1.keyframes) `
124
- from {
125
- -webkit-transform: rotateX(180deg);
126
- transform: rotateX(180deg);
127
- }
128
- to {
129
- -webkit-transform: rotateX(0deg);
130
- transform: rotateX(0deg);
131
- }`;
132
- /* ============================= x-axis 0-90, 90-180, 180-270, 270-360 */
133
- const fwdx09 = (0, styled_components_1.keyframes) `
134
- from {
135
- -webkit-transform: rotateX(0deg);
136
- transform: rotateX(0deg);
137
- }
138
- to {
139
- -webkit-transform: rotateX(90deg);
140
- transform: rotateX(90deg);
141
- }`;
142
- const fwdx918 = (0, styled_components_1.keyframes) `
143
- from {
144
- -webkit-transform: rotateX(90deg);
145
- transform: rotateX(90deg);
146
- }
147
- to {
148
- -webkit-transform: rotateX(180deg);
149
- transform: rotateX(180deg);
150
- }`;
151
- const fwdx1827 = (0, styled_components_1.keyframes) `
152
- from {
153
- -webkit-transform: rotateX(180deg);
154
- transform: rotateX(180deg);
155
- }
156
- to {
157
- -webkit-transform: rotateX(270deg);
158
- transform: rotateX(270deg);
159
- }`;
160
- const fwdx2736 = (0, styled_components_1.keyframes) `
161
- from {
162
- -webkit-transform: rotateX(270deg);
163
- transform: rotateX(270deg);
164
- }
165
- to {
166
- -webkit-transform: rotateX(360deg);
167
- transform: rotateX(360deg);
168
- }`;
169
- /* ============================== y-axis 0-180 >180 - 360 */
170
- const fwdy018 = (0, styled_components_1.keyframes) `
171
- from {
172
- -webkit-transform: rotateY(0deg);
173
- transform: rotateY(0deg);
174
- }
175
- to {
176
- -webkit-transform: rotateY(180deg);
177
- transform: rotateY(180deg);
178
- }`;
179
- const fwdy1836 = (0, styled_components_1.keyframes) `
180
- from {
181
- -webkit-transform: rotateY(180deg);
182
- transform: rotateY(180deg);
183
- }
184
- to {
185
- -webkit-transform: rotateY(0deg);
186
- transform: rotateY(0deg);
187
- }`;
188
- /* ============================= y-axis 0-90, 90-180, 180-270, 270-360 */
189
- const fwdy09 = (0, styled_components_1.keyframes) `
190
- from {
191
- -webkit-transform: rotateY(0deg);
192
- transform: rotateY(0deg);
193
- }
194
- to {
195
- -webkit-transform: rotateY(90deg);
196
- transform: rotateY(90deg);
197
- }`;
198
- const fwdy918 = (0, styled_components_1.keyframes) `
199
- from {
200
- -webkit-transform: rotateY(90deg);
201
- transform: rotateY(90deg);
202
- }
203
- to {
204
- -webkit-transform: rotateY(180deg);
205
- transform: rotateY(180deg);
206
- }`;
207
- const fwdy1827 = (0, styled_components_1.keyframes) `
208
- from {
209
- -webkit-transform: rotateY(180deg);
210
- transform: rotateY(180deg);
211
- }
212
- to {
213
- -webkit-transform: rotateY(270deg);
214
- transform: rotateY(270deg);
215
- }`;
216
- const fwdy2736 = (0, styled_components_1.keyframes) `
217
- from {
218
- -webkit-transform: rotateY(270deg);
219
- transform: rotateY(270deg);
220
- }
221
- to {
222
- -webkit-transform: rotateY(360deg);
223
- transform: rotateY(360deg);
224
- }`;
225
- /* ============================= floating */
226
- const floatX = (0, styled_components_1.keyframes) `
227
- 0% { -webkit-transform: translate(0, 0px); -ms-transform: translate(0, 0px); transform: translate(0, 0px); }
228
- 50% { -webkit-transform: translate(0, 15px); -ms-transform: translate(0, 15px); transform: translate(0, 15px); }
229
- 100% { -webkit-transform: translate(0, -0px); -ms-transform: translate(0, -0px); transform: translate(0, -0px); }`;
230
- const floatShadow = (0, styled_components_1.keyframes) `
231
- 0% {
232
- -webkit-box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
233
- box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
234
- -webkit-transform: translateY(0px);
235
- -ms-transform: translateY(0px);
236
- transform: translateY(0px);
237
- }
238
- 50% {
239
- -webkit-box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
240
- box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
241
- -webkit-transform: translateY(-20px);
242
- -ms-transform: translateY(-20px);
243
- transform: translateY(-20px);
244
- }
245
- 100% {
246
- -webkit-box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
247
- box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
248
- -webkit-transform: translateY(0px);
249
- -ms-transform: translateY(0px);
250
- transform: translateY(0px);
251
- }`;
252
- const pulseSM = (0, styled_components_1.keyframes) `
253
- 0% {
254
- -webkit-transform: scale(0.9);
255
- -ms-transform: scale(0.9);
256
- transform: scale(0.9);
257
- }
258
- 70% {
259
- -webkit-transform: scale(1);
260
- -ms-transform: scale(1);
261
- transform: scale(1);
262
- }
263
- 100% {
264
- -webkit-transform: scale(0.9);
265
- -ms-transform: scale(0.9);
266
- transform: scale(0.9);
267
- }`;
268
- const pulseMD = (0, styled_components_1.keyframes) `
269
- 0% {
270
- -webkit-transform: scale(0.7);
271
- -ms-transform: scale(0.7);
272
- transform: scale(0.7);
273
- }
274
- 70% {
275
- -webkit-transform: scale(1);
276
- -ms-transform: scale(1);
277
- transform: scale(1);
278
- }
279
- 100% {
280
- -webkit-transform: scale(0.7);
281
- -ms-transform: scale(0.7);
282
- transform: scale(0.7);
283
- }`;
284
- const pulseLG = (0, styled_components_1.keyframes) `
285
- 0% {
286
- -webkit-transform: scale(0.5);
287
- -ms-transform: scale(0.5);
288
- transform: scale(0.5);
289
- }
290
- 70% {
291
- -webkit-transform: scale(1);
292
- -ms-transform: scale(1);
293
- transform: scale(1);
294
- }
295
- 100% {
296
- -webkit-transform: scale(0.5);
297
- -ms-transform: scale(0.5);
298
- transform: scale(0.5);
299
- }`;
300
- const noAnim = (0, styled_components_1.keyframes) ``;
301
- return {
302
- X360,
303
- Y360,
304
- fadeInkf,
305
- wobY,
306
- wobX,
307
- fwdx018,
308
- fwdx1836,
309
- fwdx09,
310
- fwdx918,
311
- fwdx1827,
312
- fwdx2736,
313
- fwdy018,
314
- fwdy1836,
315
- fwdy09,
316
- fwdy918,
317
- fwdy1827,
318
- fwdy2736,
319
- floatX,
320
- floatShadow,
321
- pulseSM,
322
- pulseMD,
323
- pulseLG,
324
- swing,
325
- swingDecay,
326
- noAnim,
327
- };
328
- };
329
- exports.allAnims = allAnims;
@@ -1,6 +0,0 @@
1
- interface ObjWrapperProps {
2
- showCenterDiv?: boolean | string | number;
3
- children?: any;
4
- }
5
- export declare const ObjWrapper: (props: ObjWrapperProps) => any;
6
- export {};