anim-3d-obj 1.1.69 → 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 +57 -2
  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 +57 -2
  7. package/package.json +2 -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 {
@@ -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 {
@@ -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
@@ -3,6 +3,7 @@
3
3
 
4
4
 
5
5
 
6
+
6
7
  {
7
8
  "name": "anim-3d-obj",
8
9
  "repository": {
@@ -10,7 +11,7 @@
10
11
  "url": "https://github.com/mdnelles/anim-3d-obj-npm-publisher.git"
11
12
  },
12
13
  "homepage": "https://github.com/mdnelles/anim-3d-obj-npm-publisher.git",
13
- "version": "1.1.69",
14
+ "version": "1.1.70",
14
15
  "description": "React library for creating 3D objects quickly. Also these objects can be animated",
15
16
  "main": "dist/cjs/index.js",
16
17
  "module": "dist/esm/index.js",