anim-3d-obj 1.1.7 → 1.1.8

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 (2) hide show
  1. package/README.md +123 -67
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -3,96 +3,152 @@
3
3
  This project allows a user to create Cuboids of any size simply by entering a set of parameters.
4
4
  The program does the leg work with regard to calculating translationZ depth and config on the fly.
5
5
 
6
- ## Deployment
7
-
8
- `npm i anim-3d-obj` https://www.npmjs.com/package/anim-3d-obj
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
9
8
 
10
9
  ## Examples
11
10
 
12
- All sided simple https://codesandbox.io/s/anim-3d-obj-all-sides-simple-sdy1q0 Two sided simple https://codesandbox.io/s/anim-3d-obj-2-sides-simple-9wognm 90 degree wobble on X axis
13
- https://codesandbox.io/s/anim-3d-obj-wobblex-08mxqe speed wobble(y) 3 sides https://codesandbox.io/s/anim-3d-obj-3-sides-wobble-y-axis-dceqdp
14
-
15
- ## Authors
16
-
17
- - [@mdnelles](https://github.com/mdnelles)
18
-
19
- ## Demo
20
-
21
- The following code
22
-
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
+
18
+ ## Config
19
+
20
+ Animations are optional. Either or both of `anim1Specs` or `anim2Specs` can be applied to the object.
21
+
22
+ ```typescript
23
+ const anim1Specs: object = {
24
+ border: '', // while testing reveal the animation wrapper
25
+ degreesHi: -45, // degrees if spin
26
+ degreesLow: 45, // degrees if spin
27
+ delay: 0, // start delay in seconds
28
+ direction: 'normal', //normal alternating reverse
29
+ duration: 8, // seconds
30
+ fillMode: 'forward', // node forward backward both
31
+ iterationCount: 'infinite', // number or infinte
32
+ name: 'Y360', // ** ANIMATIONS
33
+ timing: 'ease-in-out' // linear ease ease-in-out
34
+ };
23
35
  ```
36
+
37
+ `** ANIMATIONS`
38
+
39
+ - X360: rotate 360 degrees on the x-axis
40
+ - Y360: rotate 360 degrees on the y-axis
41
+ - fadeInkf: fade object in from 0 to 1 Opacity
42
+ - wobY: wobble on y-axis (degreesHi <-> degreesLow)
43
+ - wobX: wobble on x-axis (degreesHi <-> degreesLow)
44
+ - fwdx018: spin object on x-axis from 0 degrees to 180 degrees
45
+ - fwdx1836: spin object on x-axis from 180 degrees to 360 degrees
46
+ - fwdx09: spin object on x-axis from 0 degrees to 90 degrees
47
+ - fwdx918: spin object on x-axis from 90 degrees to 180 degrees
48
+ - fwdx1827: spin object on x-axis from 180 degrees to 270 degrees
49
+ - fwdx2736: spin object on x-axis from 270 degrees to 360 degrees
50
+ - fwdy018: spin object on y-axis from 0 degrees to 180 degrees
51
+ - fwdy1836: spin object on y-axis from 180 degrees to 360 degrees
52
+ - fwdy09: spin object on y-axis from 0 degrees to 90 degrees
53
+ - fwdy918: spin object on y-axis from 90 degrees to 180 degrees
54
+ - fwdy1827: spin object on y-axis from 180 degrees to 270 degrees
55
+ - fwdy2736: spin object on y-axis from 270 degrees to 360 degrees
56
+ - floatX: float object so is not stationary
57
+ - floatShadow: float object + add shadow
58
+ - pulseSM: pulse object Small
59
+ - pulseMD: pulse object Medium
60
+ - pulseLG: pulse object Large
61
+ - noAnim: no animation place holder
62
+
63
+ <>
64
+
65
+ GLOBAL CONFIG
66
+
67
+ ```typescript
68
+ // EXAMPLE GLOBAL FACE CONFIG
69
+ // This will be applied to all Faces that do not have their own custom config
24
70
  const global: object = {
25
- // // face individual styles (over rides global)
26
- css: `
27
- border: 1px solid #00f;
28
- background-color: black;
71
+ // // face individual styles (over rides global)
72
+ css: `
73
+ border: 1px solid #fff;
74
+ background: rgb(2,0,36);
75
+ background: linear-gradient(180deg, rgba(255,255,255,.1) 0%, rgba(141,191,249,.7) 100%);
29
76
  color:white;
30
- opacity: 0.7;
77
+ text-align:center;
78
+ line-height:10;
31
79
  backface-visibility: visible;
32
80
  font-family: Arial, Helvetica, sans-serif;
81
+ border-radius:5px;
33
82
  `,
34
- body: "Hi I am global",
35
- };
36
- ...
37
- front: {
83
+ body: ' '
84
+ };
85
+ ```
86
+
87
+ <>
88
+
89
+ CUSTOM CONFIG FOR INDIVIDUAL FACES
90
+
91
+ ```typescript
92
+ const custom: object = {
93
+ // // face individual styles (over rides global)
94
+ front: {
95
+ css: ``,
96
+ body: <Login />,
97
+ },
98
+ left: {
38
99
  css: `
39
- border: 1px solid #00f;
40
- background-color: red;
41
- opacity: 0.7;
100
+ border: 1px solid #fff;
101
+ background: rgb(2,0,36);
42
102
  color:white;
43
- fontFace:sans;
44
- backface-visibility: visible;
45
- font-family: Arial, Helvetica, sans-serif;
46
- fontFamily: Cochin;
47
-
103
+ text-align: center;
104
+ line-height:8;`
105
+ body: " ",
106
+ },
107
+ right: {
108
+ css: ``,
109
+ body: " ",
110
+ },
111
+ back: {
112
+ css: ``,
113
+ body: <Logout />,
114
+ },
115
+ bottom: {
116
+ css: `
117
+ background-color:rgba(141,191,249,1);
118
+ -webkit-box-shadow: 0px 0px 23px 18px #858585;
119
+ box-shadow: 0px 0px 23px 18px #858585;
48
120
  `,
49
- body: "BOTTOM",
50
121
  },
51
122
  ```
52
123
 
124
+ ## Render
125
+
53
126
  and
54
127
 
55
- ```
56
- <Cuboid
57
- width={300}
58
- height={200}
59
- depth={100}
60
- perspectiveOrigin='50% 50%'
61
- zIndex={10}
62
- animSpecs={animSpecs}
63
- custom={custom}
64
- faces={faceprops}
65
- global={global}
66
- >
67
- {}
68
- </Cuboid>
128
+ ```typescript
129
+ <Cuboid
130
+ width={250}
131
+ height={300}
132
+ depth={250}
133
+ perspective={800}
134
+ perspectiveOrigin="50% 50%"
135
+ zIndex={10}
136
+ anim1Specs={anim1Specs}
137
+ anim2Specs={anim2Specs}
138
+ custom={custom}
139
+ faces={faceprops}
140
+ global={global}
141
+ />
69
142
  ```
70
143
 
71
144
  will produce the following
72
145
 
73
146
  ![Logo](https://raw.githubusercontent.com/mdnelles/objs-local/main/img.png?token=GHSAT0AAAAAABQVNJ4VATWQM4SI3LXSTDZWYVDOL7Q)
74
147
 
75
- ##Face Format for things like `background-image: url("myImg.png");` they can be done in `moreStyles` argument.
148
+ ## Authors
76
149
 
77
- ```
78
- const Specs: any = styled.div`
79
- opacity: ${!!opac ? opac : globalStyles.opac};
80
- position: ${position};
81
- left: ${left};
82
- margin: ${margin};
83
- padding: ${padding};
84
- width: ${width}px;
85
- font-family: ${fontFamily};
86
- height: ${height}px;
87
- background-color: ${!!bgc ? bgc : globalStyles.bgc};
88
- border: ${!!border ? border : globalStyles.border};
89
- backface-visibility: ${!!bfv ? bfv : globalStyles.bfv};
90
- ${transform}
91
- top: ${top};
92
- ${moreStyles}
93
- `;
94
- ```
150
+ - [@mdnelles](https://github.com/mdnelles)
95
151
 
96
- ## keywords
152
+ ## License
97
153
 
98
- React CSS style animation cube cuboid 3D webGL
154
+ [MIT](https://choosealicense.com/licenses/mit/)
package/package.json CHANGED
@@ -5,7 +5,7 @@
5
5
  "url": "https://github.com/mdnelles/Component-Library"
6
6
  },
7
7
  "homepage": "https://github.com/mdnelles/anim-3d-objs-launchers",
8
- "version": "1.1.7",
8
+ "version": "1.1.8",
9
9
  "description": "React library for creating 3D objects quickly. Also these objects can be animated",
10
10
  "main": "dist/cjs/index.js",
11
11
  "module": "dist/esm/index.js",