anim-3d-obj 1.1.69 → 1.1.71

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 (8) hide show
  1. package/README.md +35 -25
  2. package/dist/cjs/components/styles/AnimWrap.js +5 -2
  3. package/dist/cjs/components/styles/Anims.d.ts +2 -0
  4. package/dist/cjs/components/styles/Anims.js +57 -2
  5. package/dist/esm/components/styles/AnimWrap.js +5 -2
  6. package/dist/esm/components/styles/Anims.d.ts +2 -0
  7. package/dist/esm/components/styles/Anims.js +57 -2
  8. package/package.json +3 -1
package/README.md CHANGED
@@ -14,7 +14,7 @@ The program does the leg work with regard to calculating translationZ depth and
14
14
 
15
15
  ## Config
16
16
 
17
- Animations are optional. Either or both of `anim1Specs` or `anim2Specs` can be applied to the object.
17
+ Animations are optional. Either or both of `anim1` or `anim2` can be applied to the component.
18
18
 
19
19
  ```typescript
20
20
  const anim1 = {
@@ -33,29 +33,38 @@ const anim1 = {
33
33
 
34
34
  `** ANIMATIONS`
35
35
 
36
- - X360: rotate 360 degrees on the x-axis
37
- - Y360: rotate 360 degrees on the y-axis
38
- - fadeInkf: fade object in from 0 to 1 Opacity
39
- - wobY: wobble on y-axis (degreesHi <-> degreesLow)
40
- - wobX: wobble on x-axis (degreesHi <-> degreesLow)
41
- - fwdx018: spin object on x-axis from 0 degrees to 180 degrees
42
- - fwdx1836: spin object on x-axis from 180 degrees to 360 degrees
43
- - fwdx09: spin object on x-axis from 0 degrees to 90 degrees
44
- - fwdx918: spin object on x-axis from 90 degrees to 180 degrees
45
- - fwdx1827: spin object on x-axis from 180 degrees to 270 degrees
46
- - fwdx2736: spin object on x-axis from 270 degrees to 360 degrees
47
- - fwdy018: spin object on y-axis from 0 degrees to 180 degrees
48
- - fwdy1836: spin object on y-axis from 180 degrees to 360 degrees
49
- - fwdy09: spin object on y-axis from 0 degrees to 90 degrees
50
- - fwdy918: spin object on y-axis from 90 degrees to 180 degrees
51
- - fwdy1827: spin object on y-axis from 180 degrees to 270 degrees
52
- - fwdy2736: spin object on y-axis from 270 degrees to 360 degrees
53
- - floatX: float object so is not stationary
54
- - floatShadow: float object + add shadow
55
- - pulseSM: pulse object Small
56
- - pulseMD: pulse object Medium
57
- - pulseLG: pulse object Large
58
- - noAnim: no animation place holder
36
+ - `fadeInkf`: fade object in from 0 to 1 Opacity: [demo](https://codesandbox.io/s/anim-3d-obj-fadeinkf-1fozww)
37
+ - `floatX`: float object so is not stationary: [demo](https://codesandbox.io/s/anim-3d-obj-floatx-hzeo42)
38
+ - `floatShadow`: float object + add shadow: [demo](https://codesandbox.io/s/anim-3d-obj-floatshadow-8pp5k0)
39
+ - `pulseSM`: pulse object Small: [demo](https://codesandbox.io/s/anim-3d-obj-pulsesm-k2rjb6)
40
+ - `pulseMD`: pulse object Medium: [demo](https://codesandbox.io/s/anim-3d-obj-pulsemd-sqk2of)
41
+ - `pulseLG`: pulse object Large: [demo](https://codesandbox.io/s/anim-3d-obj-pulselg-qz7x0m)
42
+ - `swing`: Swing component: [demo](https://codesandbox.io/s/anim-3d-obj-swing-snj8li)
43
+ - `swingDecay`: Swing component with decay: [demo](https://codesandbox.io/s/anim-3d-obj-swingdecay-cku0e1)
44
+ - `noAnim`: no animation place holder
45
+
46
+
47
+ `X-AXIS Animations`
48
+ - `X360`: rotate 360 degrees on the x-axis: [demo](https://codesandbox.io/s/anim-3d-obj-x360-7kiuhw)
49
+ - `wobX`: wobble on x-axis (degreesHi <-> degreesLow): [demo](https://codesandbox.io/s/anim-3d-obj-wobx-ldwek7)
50
+ - `fwdx018`: spin object on x-axis from 0 degrees to 180 degrees: [demo](https://codesandbox.io/s/anim-3d-obj-fwd180-v90xyu)
51
+ - `fwdx1836`: spin object on x-axis from 180 degrees to 360 degrees: [demo](https://codesandbox.io/s/anim-3d-obj-fwd1836-mtwuv9)
52
+ - `fwdx09`: spin object on x-axis from 0 degrees to 90 degrees: [demo](https://codesandbox.io/s/anim-3d-obj-fwd09-84vocn)
53
+ - `fwdx918`: spin object on x-axis from 90 degrees to 180 degrees: [demo](https://codesandbox.io/s/anim-3d-obj-fwd918-6039fj)
54
+ - `fwdx1827`: spin object on x-axis from 180 degrees to 270 degrees: [demo](https://codesandbox.io/s/anim-3d-obj-fwdx1827-qpqhtq)
55
+ - `fwdx2736`: spin object on x-axis from 270 degrees to 360 degrees: [demo](https://codesandbox.io/s/anim-3d-obj-fwdx2736-e6c6wg)
56
+
57
+ `Y-AXIS Animations`
58
+ - `Y360`: rotate 360 degrees on the y-axis: [demo](https://codesandbox.io/s/anim-3d-obj-y360-16lzeb)
59
+ - `wobY`: wobble on y-axis (degreesHi <-> degreesLow): [demo](https://codesandbox.io/s/anim-3d-obj-woby-tkoxms)
60
+ - `fwdy018`: spin object on y-axis from 0 degrees to 180 degrees: [demo](https://codesandbox.io/s/anim-3d-obj-fwdy180-qpqhtq)
61
+ - `fwdy1836`: spin object on y-axis from 180 degrees to 360 degrees: [demo](https://codesandbox.io/s/anim-3d-obj-fwdy1836-qpqhtq)
62
+ - `fwdy09`: spin object on y-axis from 0 degrees to 90 degrees: [demo](https://codesandbox.io/s/anim-3d-obj-fwdy09-elklgr)
63
+ - `fwdy918`: spin object on y-axis from 90 degrees to 180 degrees: [demo](https://codesandbox.io/s/anim-3d-obj-fwdy918-gnym88)
64
+ - `fwdy1827`: spin object on y-axis from 180 degrees to 270 degrees: [demo](https://codesandbox.io/s/anim-3d-obj-fwdy1827-osskgx)
65
+ - `fwdy2736`: spin object on y-axis from 270 degrees to 360 degrees: [demo](https://codesandbox.io/s/anim-3d-obj-fwdy2736-rnbs2q)
66
+ -
67
+
59
68
 
60
69
  <>
61
70
 
@@ -117,4 +126,5 @@ const custom: object = {
117
126
  `,
118
127
  },
119
128
  ```
120
-
129
+ ## NPM Location
130
+ - https://www.npmjs.com/package/anim-3d-obj
package/dist/cjs/components/styles/AnimWrap.js CHANGED
@@ -10,9 +10,8 @@ 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
- // need to iterate through all animation posibilities and not use eval() to satisfy TS
16
15
  if (AS.name === "X360")
17
16
  theAnim = X360;
18
17
  else if (AS.name === "Y360")
@@ -57,6 +56,10 @@ const AnimWrap = (props) => {
57
56
  theAnim = pulseMD;
58
57
  else if (AS.name === "pulseLG")
59
58
  theAnim = pulseLG;
59
+ else if (AS.name === "swing")
60
+ theAnim = swing;
61
+ else if (AS.name === "swingDecay")
62
+ theAnim = swingDecay;
60
63
  else
61
64
  theAnim = noAnim;
62
65
  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,9 +4,8 @@ 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
- // need to iterate through all animation posibilities and not use eval() to satisfy TS
10
9
  if (AS.name === "X360")
11
10
  theAnim = X360;
12
11
  else if (AS.name === "Y360")
@@ -51,6 +50,10 @@ export const AnimWrap = (props) => {
51
50
  theAnim = pulseMD;
52
51
  else if (AS.name === "pulseLG")
53
52
  theAnim = pulseLG;
53
+ else if (AS.name === "swing")
54
+ theAnim = swing;
55
+ else if (AS.name === "swingDecay")
56
+ theAnim = swingDecay;
54
57
  else
55
58
  theAnim = noAnim;
56
59
  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,8 @@
3
3
 
4
4
 
5
5
 
6
+
7
+
6
8
  {
7
9
  "name": "anim-3d-obj",
8
10
  "repository": {
@@ -10,7 +12,7 @@
10
12
  "url": "https://github.com/mdnelles/anim-3d-obj-npm-publisher.git"
11
13
  },
12
14
  "homepage": "https://github.com/mdnelles/anim-3d-obj-npm-publisher.git",
13
- "version": "1.1.69",
15
+ "version": "1.1.71",
14
16
  "description": "React library for creating 3D objects quickly. Also these objects can be animated",
15
17
  "main": "dist/cjs/index.js",
16
18
  "module": "dist/esm/index.js",