anim-3d-obj 1.1.68 → 1.1.70

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 (7) hide show
  1. package/dist/cjs/components/styles/AnimWrap.js +5 -1
  2. package/dist/cjs/components/styles/Anims.d.ts +2 -0
  3. package/dist/cjs/components/styles/Anims.js +81 -26
  4. package/dist/esm/components/styles/AnimWrap.js +5 -1
  5. package/dist/esm/components/styles/Anims.d.ts +2 -0
  6. package/dist/esm/components/styles/Anims.js +81 -26
  7. package/package.json +3 -1
package/dist/cjs/components/styles/AnimWrap.js CHANGED
@@ -10,7 +10,7 @@ const Anims_1 = require("./Anims");
10
10
  const AnimWrap = (props) => {
11
11
  const { children, animSpecs } = props;
12
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, noAnim, } = (0, Anims_1.allAnims)({ degreesHi: AS.degreesHi, degreesLow: AS.degreesLow });
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
14
  let theAnim = "noAnim";
15
15
  // need to iterate through all animation posibilities and not use eval() to satisfy TS
16
16
  if (AS.name === "X360")
@@ -57,6 +57,10 @@ const AnimWrap = (props) => {
57
57
  theAnim = pulseMD;
58
58
  else if (AS.name === "pulseLG")
59
59
  theAnim = pulseLG;
60
+ else if (AS.name === "swing")
61
+ theAnim = swing;
62
+ else if (AS.name === "swingDecay")
63
+ theAnim = swingDecay;
60
64
  else
61
65
  theAnim = noAnim;
62
66
  const AnimWrapDiv = styled_components_1.default.div `
package/dist/cjs/components/styles/Anims.d.ts CHANGED
@@ -25,6 +25,8 @@ export declare const allAnims: (props: AllAnimsProps) => {
25
25
  pulseSM: import("styled-components").Keyframes;
26
26
  pulseMD: import("styled-components").Keyframes;
27
27
  pulseLG: import("styled-components").Keyframes;
28
+ swing: import("styled-components").Keyframes;
29
+ swingDecay: import("styled-components").Keyframes;
28
30
  noAnim: import("styled-components").Keyframes;
29
31
  };
30
32
  export {};
package/dist/cjs/components/styles/Anims.js CHANGED
@@ -4,6 +4,60 @@ exports.allAnims = void 0;
4
4
  const styled_components_1 = require("styled-components");
5
5
  const allAnims = (props) => {
6
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
+ `;
7
61
  const X360 = (0, styled_components_1.keyframes) `
8
62
  from {
9
63
  -webkit-transform: rotateX(360deg);
@@ -12,8 +66,7 @@ const allAnims = (props) => {
12
66
  to {
13
67
  -webkit-transform: rotateX(0deg);
14
68
  transform: rotateX(0deg);
15
- }
16
- }`;
69
+ }`;
17
70
  //////// Y360
18
71
  const Y360 = (0, styled_components_1.keyframes) `
19
72
  from {
@@ -88,30 +141,30 @@ const allAnims = (props) => {
88
141
  }`;
89
142
  const fwdx918 = (0, styled_components_1.keyframes) `
90
143
  from {
91
- -webkit-transform: rotateX(-90deg);
92
- transform: rotateX(-90deg);
144
+ -webkit-transform: rotateX(90deg);
145
+ transform: rotateX(90deg);
93
146
  }
94
147
  to {
95
- -webkit-transform: rotateX(-180deg);
96
- transform: rotateX(-180deg);
148
+ -webkit-transform: rotateX(180deg);
149
+ transform: rotateX(180deg);
97
150
  }`;
98
151
  const fwdx1827 = (0, styled_components_1.keyframes) `
99
152
  from {
100
- -webkit-transform: rotateX(-180deg);
101
- transform: rotateX(-180deg);
153
+ -webkit-transform: rotateX(180deg);
154
+ transform: rotateX(180deg);
102
155
  }
103
156
  to {
104
- -webkit-transform: rotateX(-270deg);
105
- transform: rotateX(-270deg);
157
+ -webkit-transform: rotateX(270deg);
158
+ transform: rotateX(270deg);
106
159
  }`;
107
160
  const fwdx2736 = (0, styled_components_1.keyframes) `
108
161
  from {
109
- -webkit-transform: rotateX(-270deg);
110
- transform: rotateX(-270deg);
162
+ -webkit-transform: rotateX(270deg);
163
+ transform: rotateX(270deg);
111
164
  }
112
165
  to {
113
- -webkit-transform: rotateX(-360deg);
114
- transform: rotateX(-360deg);
166
+ -webkit-transform: rotateX(360deg);
167
+ transform: rotateX(360deg);
115
168
  }`;
116
169
  /* ============================== y-axis 0-180 >180 - 360 */
117
170
  const fwdy018 = (0, styled_components_1.keyframes) `
@@ -144,30 +197,30 @@ const allAnims = (props) => {
144
197
  }`;
145
198
  const fwdy918 = (0, styled_components_1.keyframes) `
146
199
  from {
147
- -webkit-transform: rotateY(-90deg);
148
- transform: rotateY(-90deg);
200
+ -webkit-transform: rotateY(90deg);
201
+ transform: rotateY(90deg);
149
202
  }
150
203
  to {
151
- -webkit-transform: rotateY(-180deg);
152
- transform: rotateY(-180deg);
204
+ -webkit-transform: rotateY(180deg);
205
+ transform: rotateY(180deg);
153
206
  }`;
154
207
  const fwdy1827 = (0, styled_components_1.keyframes) `
155
208
  from {
156
- -webkit-transform: rotateY(-180deg);
157
- transform: rotateY(-180deg);
209
+ -webkit-transform: rotateY(180deg);
210
+ transform: rotateY(180deg);
158
211
  }
159
212
  to {
160
- -webkit-transform: rotateY(-270deg);
161
- transform: rotateY(-270deg);
213
+ -webkit-transform: rotateY(270deg);
214
+ transform: rotateY(270deg);
162
215
  }`;
163
216
  const fwdy2736 = (0, styled_components_1.keyframes) `
164
217
  from {
165
- -webkit-transform: rotateY(-270deg);
166
- transform: rotateY(-270deg);
218
+ -webkit-transform: rotateY(270deg);
219
+ transform: rotateY(270deg);
167
220
  }
168
221
  to {
169
- -webkit-transform: rotateY(-360deg);
170
- transform: rotateY(-360deg);
222
+ -webkit-transform: rotateY(360deg);
223
+ transform: rotateY(360deg);
171
224
  }`;
172
225
  /* ============================= floating */
173
226
  const floatX = (0, styled_components_1.keyframes) `
@@ -268,6 +321,8 @@ const allAnims = (props) => {
268
321
  pulseSM,
269
322
  pulseMD,
270
323
  pulseLG,
324
+ swing,
325
+ swingDecay,
271
326
  noAnim,
272
327
  };
273
328
  };
package/dist/esm/components/styles/AnimWrap.js CHANGED
@@ -4,7 +4,7 @@ import { allAnims } from "./Anims";
4
4
  export const AnimWrap = (props) => {
5
5
  const { children, animSpecs } = props;
6
6
  const AS = animSpecs;
7
- const { X360, Y360, fadeInkf, wobY, wobX, fwdx018, fwdx1836, fwdx09, fwdx918, fwdx1827, fwdx2736, fwdy018, fwdy1836, fwdy09, fwdy918, fwdy1827, fwdy2736, floatX, floatShadow, pulseSM, pulseMD, pulseLG, noAnim, } = allAnims({ degreesHi: AS.degreesHi, degreesLow: AS.degreesLow });
7
+ 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, } = allAnims({ degreesHi: AS.degreesHi, degreesLow: AS.degreesLow });
8
8
  let theAnim = "noAnim";
9
9
  // need to iterate through all animation posibilities and not use eval() to satisfy TS
10
10
  if (AS.name === "X360")
@@ -51,6 +51,10 @@ export const AnimWrap = (props) => {
51
51
  theAnim = pulseMD;
52
52
  else if (AS.name === "pulseLG")
53
53
  theAnim = pulseLG;
54
+ else if (AS.name === "swing")
55
+ theAnim = swing;
56
+ else if (AS.name === "swingDecay")
57
+ theAnim = swingDecay;
54
58
  else
55
59
  theAnim = noAnim;
56
60
  const AnimWrapDiv = styled.div `
package/dist/esm/components/styles/Anims.d.ts CHANGED
@@ -25,6 +25,8 @@ export declare const allAnims: (props: AllAnimsProps) => {
25
25
  pulseSM: import("styled-components").Keyframes;
26
26
  pulseMD: import("styled-components").Keyframes;
27
27
  pulseLG: import("styled-components").Keyframes;
28
+ swing: import("styled-components").Keyframes;
29
+ swingDecay: import("styled-components").Keyframes;
28
30
  noAnim: import("styled-components").Keyframes;
29
31
  };
30
32
  export {};
package/dist/esm/components/styles/Anims.js CHANGED
@@ -1,6 +1,60 @@
1
1
  import { keyframes } from "styled-components";
2
2
  export const allAnims = (props) => {
3
3
  const { degreesLow = 0, degreesHi = 0 } = props;
4
+ const swing = keyframes `
5
+ 0% {
6
+ -webkit-transform-origin: top;
7
+ -ms-transform-origin: top;
8
+ transform-origin: top;
9
+ -webkit-transform: perspective(550px) rotateX(77deg);
10
+ transform: perspective(550px) rotateX(77deg);
11
+ }
12
+ 50% {
13
+ -webkit-transform: perspective(550px) rotateX(-77deg);
14
+ transform: perspective(550px) rotateX(-77deg);
15
+ }
16
+ 100% {
17
+ -webkit-transform-origin: top;
18
+ -ms-transform-origin: top;
19
+ transform-origin: top;
20
+ -webkit-transform: perspective(550px) rotateX(77deg);
21
+ transform: perspective(550px) rotateX(77deg);
22
+ }
23
+ `;
24
+ const swingDecay = keyframes `
25
+ 0% {
26
+ -webkit-transform-origin: top;
27
+ -ms-transform-origin: top;
28
+ transform-origin: top;
29
+ -webkit-transform: perspective(550px) rotateX(77deg);
30
+ transform: perspective(550px) rotateX(77deg);
31
+ }
32
+ 20% {
33
+ -webkit-transform: perspective(550px) rotateX(-55deg);
34
+ transform: perspective(550px) rotateX(-55deg);
35
+ }
36
+ 40% {
37
+ -webkit-transform: perspective(550px) rotateX(44deg);
38
+ transform: perspective(550px) rotateX(44deg);
39
+ }
40
+
41
+ 60% {
42
+ -webkit-transform: perspective(550px) rotateX(-22deg);
43
+ transform: perspective(550px) rotateX(-22deg);
44
+ }
45
+
46
+ 80% {
47
+ -webkit-transform: perspective(550px) rotateX(11deg);
48
+ transform: perspective(550px) rotateX(11deg);
49
+ }
50
+ 100% {
51
+ -webkit-transform-origin: top;
52
+ -ms-transform-origin: top;
53
+ transform-origin: top;
54
+ -webkit-transform: perspective(550px) rotateX(0);
55
+ transform: perspective(550px) rotateX(0);
56
+ }
57
+ `;
4
58
  const X360 = keyframes `
5
59
  from {
6
60
  -webkit-transform: rotateX(360deg);
@@ -9,8 +63,7 @@ export const allAnims = (props) => {
9
63
  to {
10
64
  -webkit-transform: rotateX(0deg);
11
65
  transform: rotateX(0deg);
12
- }
13
- }`;
66
+ }`;
14
67
  //////// Y360
15
68
  const Y360 = keyframes `
16
69
  from {
@@ -85,30 +138,30 @@ export const allAnims = (props) => {
85
138
  }`;
86
139
  const fwdx918 = keyframes `
87
140
  from {
88
- -webkit-transform: rotateX(-90deg);
89
- transform: rotateX(-90deg);
141
+ -webkit-transform: rotateX(90deg);
142
+ transform: rotateX(90deg);
90
143
  }
91
144
  to {
92
- -webkit-transform: rotateX(-180deg);
93
- transform: rotateX(-180deg);
145
+ -webkit-transform: rotateX(180deg);
146
+ transform: rotateX(180deg);
94
147
  }`;
95
148
  const fwdx1827 = keyframes `
96
149
  from {
97
- -webkit-transform: rotateX(-180deg);
98
- transform: rotateX(-180deg);
150
+ -webkit-transform: rotateX(180deg);
151
+ transform: rotateX(180deg);
99
152
  }
100
153
  to {
101
- -webkit-transform: rotateX(-270deg);
102
- transform: rotateX(-270deg);
154
+ -webkit-transform: rotateX(270deg);
155
+ transform: rotateX(270deg);
103
156
  }`;
104
157
  const fwdx2736 = keyframes `
105
158
  from {
106
- -webkit-transform: rotateX(-270deg);
107
- transform: rotateX(-270deg);
159
+ -webkit-transform: rotateX(270deg);
160
+ transform: rotateX(270deg);
108
161
  }
109
162
  to {
110
- -webkit-transform: rotateX(-360deg);
111
- transform: rotateX(-360deg);
163
+ -webkit-transform: rotateX(360deg);
164
+ transform: rotateX(360deg);
112
165
  }`;
113
166
  /* ============================== y-axis 0-180 >180 - 360 */
114
167
  const fwdy018 = keyframes `
@@ -141,30 +194,30 @@ export const allAnims = (props) => {
141
194
  }`;
142
195
  const fwdy918 = keyframes `
143
196
  from {
144
- -webkit-transform: rotateY(-90deg);
145
- transform: rotateY(-90deg);
197
+ -webkit-transform: rotateY(90deg);
198
+ transform: rotateY(90deg);
146
199
  }
147
200
  to {
148
- -webkit-transform: rotateY(-180deg);
149
- transform: rotateY(-180deg);
201
+ -webkit-transform: rotateY(180deg);
202
+ transform: rotateY(180deg);
150
203
  }`;
151
204
  const fwdy1827 = keyframes `
152
205
  from {
153
- -webkit-transform: rotateY(-180deg);
154
- transform: rotateY(-180deg);
206
+ -webkit-transform: rotateY(180deg);
207
+ transform: rotateY(180deg);
155
208
  }
156
209
  to {
157
- -webkit-transform: rotateY(-270deg);
158
- transform: rotateY(-270deg);
210
+ -webkit-transform: rotateY(270deg);
211
+ transform: rotateY(270deg);
159
212
  }`;
160
213
  const fwdy2736 = keyframes `
161
214
  from {
162
- -webkit-transform: rotateY(-270deg);
163
- transform: rotateY(-270deg);
215
+ -webkit-transform: rotateY(270deg);
216
+ transform: rotateY(270deg);
164
217
  }
165
218
  to {
166
- -webkit-transform: rotateY(-360deg);
167
- transform: rotateY(-360deg);
219
+ -webkit-transform: rotateY(360deg);
220
+ transform: rotateY(360deg);
168
221
  }`;
169
222
  /* ============================= floating */
170
223
  const floatX = keyframes `
@@ -265,6 +318,8 @@ export const allAnims = (props) => {
265
318
  pulseSM,
266
319
  pulseMD,
267
320
  pulseLG,
321
+ swing,
322
+ swingDecay,
268
323
  noAnim,
269
324
  };
270
325
  };
package/package.json CHANGED
@@ -2,6 +2,8 @@
2
2
 
3
3
 
4
4
 
5
+
6
+
5
7
  {
6
8
  "name": "anim-3d-obj",
7
9
  "repository": {
@@ -9,7 +11,7 @@
9
11
  "url": "https://github.com/mdnelles/anim-3d-obj-npm-publisher.git"
10
12
  },
11
13
  "homepage": "https://github.com/mdnelles/anim-3d-obj-npm-publisher.git",
12
- "version": "1.1.68",
14
+ "version": "1.1.70",
13
15
  "description": "React library for creating 3D objects quickly. Also these objects can be animated",
14
16
  "main": "dist/cjs/index.js",
15
17
  "module": "dist/esm/index.js",