anim-3d-obj 1.1.70 → 1.1.72
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.
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 `
|
|
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 = {
|
|
@@ -24,7 +24,7 @@ const anim1 = {
|
|
|
24
24
|
delay: 0, // start delay in seconds
|
|
25
25
|
direction: "normal", //normal alternating reverse
|
|
26
26
|
duration: 8, // seconds
|
|
27
|
-
fillMode: "
|
|
27
|
+
fillMode: "forwards", // none forwards backwards both
|
|
28
28
|
iterationCount: "infinite", // number or infinte
|
|
29
29
|
name: "Y360", // ** ANIMATIONS
|
|
30
30
|
timing: "ease-in-out", // linear ease ease-in-out
|
|
@@ -33,29 +33,38 @@ const anim1 = {
|
|
|
33
33
|
|
|
34
34
|
`** ANIMATIONS`
|
|
35
35
|
|
|
36
|
-
-
|
|
37
|
-
-
|
|
38
|
-
-
|
|
39
|
-
-
|
|
40
|
-
-
|
|
41
|
-
-
|
|
42
|
-
-
|
|
43
|
-
-
|
|
44
|
-
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
-
|
|
48
|
-
-
|
|
49
|
-
-
|
|
50
|
-
-
|
|
51
|
-
-
|
|
52
|
-
-
|
|
53
|
-
-
|
|
54
|
-
-
|
|
55
|
-
-
|
|
56
|
-
|
|
57
|
-
-
|
|
58
|
-
-
|
|
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
|
|
@@ -12,7 +12,6 @@ const AnimWrap = (props) => {
|
|
|
12
12
|
const AS = animSpecs;
|
|
13
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")
|
|
@@ -6,7 +6,6 @@ export const AnimWrap = (props) => {
|
|
|
6
6
|
const AS = animSpecs;
|
|
7
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")
|
package/package.json
CHANGED
|
@@ -4,6 +4,8 @@
|
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
7
|
+
|
|
8
|
+
|
|
7
9
|
{
|
|
8
10
|
"name": "anim-3d-obj",
|
|
9
11
|
"repository": {
|
|
@@ -11,7 +13,7 @@
|
|
|
11
13
|
"url": "https://github.com/mdnelles/anim-3d-obj-npm-publisher.git"
|
|
12
14
|
},
|
|
13
15
|
"homepage": "https://github.com/mdnelles/anim-3d-obj-npm-publisher.git",
|
|
14
|
-
"version": "1.1.
|
|
16
|
+
"version": "1.1.72",
|
|
15
17
|
"description": "React library for creating 3D objects quickly. Also these objects can be animated",
|
|
16
18
|
"main": "dist/cjs/index.js",
|
|
17
19
|
"module": "dist/esm/index.js",
|