anim-3d-obj 1.1.23 → 1.1.25
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 +219 -3
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -1,7 +1,223 @@
|
|
|
1
|
-
# React
|
|
1
|
+
# React Typescript Cuboid Builder
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
This project allows a user to create Cuboids of any size simply by entering a set of parameters.
|
|
4
|
+
The program does the leg work with regard to calculating translationZ depth and config on the fly.
|
|
5
|
+
|
|
6
|
+
- [GIT HOME](https://github.com/mdnelles/anim-3d-objs-launcher)
|
|
7
|
+
- [NPM HOME](https://www.npmjs.com/package/anim-3d-obj) npm i anim-3d-obj
|
|
8
|
+
|
|
9
|
+
## Examples
|
|
10
|
+
|
|
11
|
+
- [6 sided Cuboid - animate X360 Y360](https://codesandbox.io/s/anim-3d-obj-all-sides-simple-bf67yg)
|
|
12
|
+
- [3 sided Object - animate y-axis](https://codesandbox.io/s/anim-3d-obj-3-sides-wobble-y-axis-wglkms)
|
|
13
|
+
- [Double box spin](https://codesandbox.io/s/react-anim-3d-double-box-spin-vbdhg2)
|
|
14
|
+
- [2 sided object with animation wobble](https://codesandbox.io/s/anim-3d-obj-wobblex-mmidkg)
|
|
15
|
+
- [Parallel divs animated x and y axis in tandem](https://codesandbox.io/s/anim-3d-obj-2-sides-simple-4057y7)
|
|
16
|
+
- [Spinning Slab](https://codesandbox.io/s/react-anim-3d-pulse-kc8g0f)
|
|
17
|
+
- [GIT HOME](https://github.com/mdnelles/anim-3d-objs-launcher)
|
|
18
|
+
- [NPM HOME](https://www.npmjs.com/package/anim-3d-obj) npm i anim-3d-obj
|
|
19
|
+
|
|
20
|
+
## Examples
|
|
21
|
+
|
|
22
|
+
- [6 sided Cuboid - animate X360 Y360](https://codesandbox.io/s/anim-3d-obj-all-sides-simple-bf67yg)
|
|
23
|
+
- [3 sided Object - animate y-axis](https://codesandbox.io/s/anim-3d-obj-3-sides-wobble-y-axis-wglkms)
|
|
24
|
+
- [Double box spin](https://codesandbox.io/s/react-anim-3d-double-box-spin-vbdhg2)
|
|
25
|
+
- [2 sided object with animation wobble](https://codesandbox.io/s/anim-3d-obj-wobblex-mmidkg)
|
|
26
|
+
- [Parallel divs animated x and y axis in tandem](https://codesandbox.io/s/anim-3d-obj-2-sides-simple-4057y7)
|
|
27
|
+
- [Spinning Slab](https://codesandbox.io/s/react-anim-3d-pulse-kc8g0f)
|
|
28
|
+
|
|
29
|
+
## Config
|
|
30
|
+
|
|
31
|
+
Animations are optional. Either or both of `anim1Specs` or `anim2Specs` can be applied to the object.
|
|
32
|
+
|
|
33
|
+
```typescript
|
|
34
|
+
const anim1Specs: object = {
|
|
35
|
+
|
|
36
|
+
border: '', // while testing reveal the animation wrapper
|
|
37
|
+
degreesHi: -45, // degrees if spin
|
|
38
|
+
degreesLow: 45, // degrees if spin
|
|
39
|
+
delay: 0, // start delay in seconds
|
|
40
|
+
direction: 'normal', //normal alternating reverse
|
|
41
|
+
duration: 8, // seconds
|
|
42
|
+
fillMode: 'forward', // node forward backward both
|
|
43
|
+
iterationCount: 'infinite', // number or infinte
|
|
44
|
+
name: 'Y360', // ** ANIMATIONS
|
|
45
|
+
timing: 'ease-in-out', // linear ease ease-in-out
|
|
46
|
+
}
|
|
47
|
+
=======
|
|
48
|
+
border: "", // while testing reveal the animation wrapper
|
|
49
|
+
degreesHi: -45, // degrees if spin
|
|
50
|
+
degreesLow: 45, // degrees if spin
|
|
51
|
+
delay: 0, // start delay in seconds
|
|
52
|
+
direction: "normal", //normal alternating reverse
|
|
53
|
+
duration: 8, // seconds
|
|
54
|
+
fillMode: "forward", // node forward backward both
|
|
55
|
+
iterationCount: "infinite", // number or infinte
|
|
56
|
+
name: "Y360", // ** ANIMATIONS
|
|
57
|
+
timing: "ease-in-out", // linear ease ease-in-out
|
|
58
|
+
};
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
`** ANIMATIONS`
|
|
62
|
+
|
|
63
|
+
- X360: rotate 360 degrees on the x-axis
|
|
64
|
+
- Y360: rotate 360 degrees on the y-axis
|
|
65
|
+
- fadeInkf: fade object in from 0 to 1 Opacity
|
|
66
|
+
- wobY: wobble on y-axis (degreesHi <-> degreesLow)
|
|
67
|
+
- wobX: wobble on x-axis (degreesHi <-> degreesLow)
|
|
68
|
+
- fwdx018: spin object on x-axis from 0 degrees to 180 degrees
|
|
69
|
+
- fwdx1836: spin object on x-axis from 180 degrees to 360 degrees
|
|
70
|
+
- fwdx09: spin object on x-axis from 0 degrees to 90 degrees
|
|
71
|
+
- fwdx918: spin object on x-axis from 90 degrees to 180 degrees
|
|
72
|
+
- fwdx1827: spin object on x-axis from 180 degrees to 270 degrees
|
|
73
|
+
- fwdx2736: spin object on x-axis from 270 degrees to 360 degrees
|
|
74
|
+
- fwdy018: spin object on y-axis from 0 degrees to 180 degrees
|
|
75
|
+
- fwdy1836: spin object on y-axis from 180 degrees to 360 degrees
|
|
76
|
+
- fwdy09: spin object on y-axis from 0 degrees to 90 degrees
|
|
77
|
+
- fwdy918: spin object on y-axis from 90 degrees to 180 degrees
|
|
78
|
+
- fwdy1827: spin object on y-axis from 180 degrees to 270 degrees
|
|
79
|
+
- fwdy2736: spin object on y-axis from 270 degrees to 360 degrees
|
|
80
|
+
- floatX: float object so is not stationary
|
|
81
|
+
- floatShadow: float object + add shadow
|
|
82
|
+
- pulseSM: pulse object Small
|
|
83
|
+
- pulseMD: pulse object Medium
|
|
84
|
+
- pulseLG: pulse object Large
|
|
85
|
+
- # noAnim: no animation place holder
|
|
86
|
+
- X360: rotate 360 degrees on the x-axis
|
|
87
|
+
- Y360: rotate 360 degrees on the y-axis
|
|
88
|
+
- fadeInkf: fade object in from 0 to 1 Opacity
|
|
89
|
+
- wobY: wobble on y-axis (degreesHi <-> degreesLow)
|
|
90
|
+
- wobX: wobble on x-axis (degreesHi <-> degreesLow)
|
|
91
|
+
- fwdx018: spin object on x-axis from 0 degrees to 180 degrees
|
|
92
|
+
- fwdx1836: spin object on x-axis from 180 degrees to 360 degrees
|
|
93
|
+
- fwdx09: spin object on x-axis from 0 degrees to 90 degrees
|
|
94
|
+
- fwdx918: spin object on x-axis from 90 degrees to 180 degrees
|
|
95
|
+
- fwdx1827: spin object on x-axis from 180 degrees to 270 degrees
|
|
96
|
+
- fwdx2736: spin object on x-axis from 270 degrees to 360 degrees
|
|
97
|
+
- fwdy018: spin object on y-axis from 0 degrees to 180 degrees
|
|
98
|
+
- fwdy1836: spin object on y-axis from 180 degrees to 360 degrees
|
|
99
|
+
- fwdy09: spin object on y-axis from 0 degrees to 90 degrees
|
|
100
|
+
- fwdy918: spin object on y-axis from 90 degrees to 180 degrees
|
|
101
|
+
- fwdy1827: spin object on y-axis from 180 degrees to 270 degrees
|
|
102
|
+
- fwdy2736: spin object on y-axis from 270 degrees to 360 degrees
|
|
103
|
+
- floatX: float object so is not stationary
|
|
104
|
+
- floatShadow: float object + add shadow
|
|
105
|
+
- pulseSM: pulse object Small
|
|
106
|
+
- pulseMD: pulse object Medium
|
|
107
|
+
- pulseLG: pulse object Large
|
|
108
|
+
- noAnim: no animation place holder
|
|
109
|
+
|
|
110
|
+
<>
|
|
111
|
+
|
|
112
|
+
GLOBAL CONFIG
|
|
113
|
+
|
|
114
|
+
```typescript
|
|
115
|
+
// EXAMPLE GLOBAL FACE CONFIG
|
|
116
|
+
// This will be applied to all Faces that do not have their own custom config
|
|
117
|
+
const global: object = {
|
|
118
|
+
|
|
119
|
+
// // face individual styles (over rides global)
|
|
120
|
+
css: `
|
|
121
|
+
=======
|
|
122
|
+
// // face individual styles (over rides global)
|
|
123
|
+
css: `
|
|
124
|
+
|
|
125
|
+
border: 1px solid #fff;
|
|
126
|
+
background: rgb(2,0,36);
|
|
127
|
+
background: linear-gradient(180deg, rgba(255,255,255,.1) 0%, rgba(141,191,249,.7) 100%);
|
|
128
|
+
color:white;
|
|
129
|
+
text-align:center;
|
|
130
|
+
line-height:10;
|
|
131
|
+
backface-visibility: visible;
|
|
132
|
+
font-family: Arial, Helvetica, sans-serif;
|
|
133
|
+
border-radius:5px;
|
|
134
|
+
`,
|
|
135
|
+
|
|
136
|
+
body: ' ',
|
|
137
|
+
}
|
|
138
|
+
=======
|
|
139
|
+
body: " ",
|
|
140
|
+
};
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
<>
|
|
144
|
+
|
|
145
|
+
CUSTOM CONFIG FOR INDIVIDUAL FACES
|
|
146
|
+
|
|
147
|
+
```typescript
|
|
148
|
+
const custom: object = {
|
|
149
|
+
// // face individual styles (over rides global)
|
|
150
|
+
front: {
|
|
151
|
+
css: ``,
|
|
152
|
+
body: <Login />,
|
|
153
|
+
},
|
|
154
|
+
left: {
|
|
155
|
+
css: `
|
|
156
|
+
border: 1px solid #fff;
|
|
157
|
+
background: rgb(2,0,36);
|
|
158
|
+
color:white;
|
|
159
|
+
text-align: center;
|
|
160
|
+
line-height:8;`
|
|
161
|
+
body: " ",
|
|
162
|
+
},
|
|
163
|
+
right: {
|
|
164
|
+
css: ``,
|
|
165
|
+
body: " ",
|
|
166
|
+
},
|
|
167
|
+
back: {
|
|
168
|
+
css: ``,
|
|
169
|
+
body: <Logout />,
|
|
170
|
+
},
|
|
171
|
+
bottom: {
|
|
172
|
+
css: `
|
|
173
|
+
background-color:rgba(141,191,249,1);
|
|
174
|
+
-webkit-box-shadow: 0px 0px 23px 18px #858585;
|
|
175
|
+
box-shadow: 0px 0px 23px 18px #858585;
|
|
176
|
+
`,
|
|
177
|
+
},
|
|
178
|
+
```
|
|
179
|
+
|
|
180
|
+
## Render
|
|
181
|
+
|
|
182
|
+
and
|
|
183
|
+
|
|
184
|
+
```typescript
|
|
185
|
+
<Cuboid
|
|
186
|
+
width={250}
|
|
187
|
+
height={300}
|
|
188
|
+
depth={250}
|
|
189
|
+
perspective={800}
|
|
190
|
+
perspectiveOrigin='50% 50%'
|
|
191
|
+
zIndex={10}
|
|
192
|
+
anim1Specs={anim1Specs}
|
|
193
|
+
anim2Specs={anim2Specs}
|
|
194
|
+
custom={custom}
|
|
195
|
+
faces={faceprops}
|
|
196
|
+
global={global}
|
|
197
|
+
=======
|
|
198
|
+
width={250}
|
|
199
|
+
height={300}
|
|
200
|
+
depth={250}
|
|
201
|
+
perspective={800}
|
|
202
|
+
perspectiveOrigin='50% 50%'
|
|
203
|
+
zIndex={10}
|
|
204
|
+
anim1Specs={anim1Specs}
|
|
205
|
+
anim2Specs={anim2Specs}
|
|
206
|
+
custom={custom}
|
|
207
|
+
faces={faceprops}
|
|
208
|
+
global={global}
|
|
209
|
+
/>
|
|
210
|
+
```
|
|
211
|
+
|
|
212
|
+
will produce the following
|
|
213
|
+
|
|
214
|
+
|
|
215
|
+
|
|
216
|
+
## Authors
|
|
217
|
+
|
|
218
|
+
- # [@mdnelles](https://github.com/mdnelles)
|
|
219
|
+
- [@mdnelles](https://github.com/mdnelles)
|
|
4
220
|
|
|
5
221
|
## License
|
|
6
222
|
|
|
7
|
-
MIT
|
|
223
|
+
[MIT](https://choosealicense.com/licenses/mit/)
|
package/package.json
CHANGED
|
@@ -2,9 +2,10 @@
|
|
|
2
2
|
"name": "anim-3d-obj",
|
|
3
3
|
"repository": {
|
|
4
4
|
"type": "git",
|
|
5
|
-
"url": "https://github.com/mdnelles/
|
|
5
|
+
"url": "https://github.com/mdnelles/anim-3d-objs",
|
|
6
|
+
"homepage": "https://github.com/mdnelles/anim-3d-objs/blob/main/README.md"
|
|
6
7
|
},
|
|
7
|
-
"version": "1.1.
|
|
8
|
+
"version": "1.1.25",
|
|
8
9
|
"description": "A component library for getting people started with easy to re-use components for everyday projects.",
|
|
9
10
|
"main": "dist/cjs/index.js",
|
|
10
11
|
"module": "dist/esm/index.js",
|