anim-3d-obj 1.1.28 → 1.1.31

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 +13 -166
  2. package/dist/cjs/components/styles/Anims.d.ts +2 -0
  3. package/dist/cjs/components/styles/Anims.js +48 -17
  4. package/dist/cjs/components/styles/Anims.js.map +1 -1
  5. package/dist/esm/components/styles/Anims.d.ts +2 -0
  6. package/dist/esm/components/styles/Anims.js +48 -17
  7. package/dist/esm/components/styles/Anims.js.map +1 -1
  8. package/package.json +1 -1
package/README.md CHANGED
@@ -3,75 +3,37 @@
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
- - [GIT HOME](https://github.com/mdnelles/anim-3d-objs)
7
- - [NPM HOME](https://www.npmjs.com/package/anim-3d-obj) npm i anim-3d-obj
8
-
9
6
  ## Examples
10
7
 
11
- - [6 sided Cuboid - animate X360 Y360](https://codesandbox.io/s/anim-3d-obj-all-sides-simple-bf67yg-tzr2v6?file=/src/index.js)
8
+ - [6 sided Cuboid - animate X360 Y360](https://codesandbox.io/s/anim-3d-obj-all-sides-simple-bf67yg-tzr2v6)
12
9
  - [3 sided Object - animate y-axis](https://codesandbox.io/s/anim-3d-obj-3-sides-wobble-y-axis-wglkms)
13
10
  - [Double box spin](https://codesandbox.io/s/react-anim-3d-double-box-spin-vbdhg2)
14
11
  - [2 sided object with animation wobble](https://codesandbox.io/s/anim-3d-obj-2-sided-anim-wobble-e14v3b)
15
12
  - [Parallel divs animated x and y axis in tandem](https://codesandbox.io/s/anim-3d-obj-2-sides-simple-4057y7)
16
13
  - [Spinning Slab](https://codesandbox.io/s/react-anim-3d-pulse-kc8g0f)
14
+ - [Double animation] (https://codesandbox.io/s/react-anim-3d-double-animation-kexyzk)
17
15
 
18
16
  ## Config
19
17
 
20
- Animations are optional. Either or both of `anim1Specs` or `anim2Specs` can be applied to the object.
18
+ Animations are optional. Either or both of `anim1Specs` or `anim2Specs` can be applied to the object. Both could be used if you want to apply animations on the X and Y acis.
21
19
 
22
20
  ```typescript
23
21
  const anim1Specs: object = {
24
-
25
- border: '', // while testing reveal the animation wrapper
26
- degreesHi: -45, // degrees if spin
27
- degreesLow: 45, // degrees if spin
28
- delay: 0, // start delay in seconds
29
- direction: 'normal', //normal alternating reverse
30
- duration: 8, // seconds
31
- fillMode: 'forward', // node forward backward both
32
- iterationCount: 'infinite', // number or infinte
33
- name: 'Y360', // ** ANIMATIONS
34
- timing: 'ease-in-out', // linear ease ease-in-out
35
- }
36
- =======
37
- border: "", // while testing reveal the animation wrapper
38
- degreesHi: -45, // degrees if spin
39
- degreesLow: 45, // degrees if spin
40
- delay: 0, // start delay in seconds
41
- direction: "normal", //normal alternating reverse
42
- duration: 8, // seconds
43
- fillMode: "forward", // node forward backward both
44
- iterationCount: "infinite", // number or infinte
45
- name: "Y360", // ** ANIMATIONS
46
- timing: "ease-in-out", // linear ease ease-in-out
22
+ border: '', // while testing reveal the animation wrapper
23
+ degreesHi: -45, // degrees if spin
24
+ degreesLow: 45, // degrees if spin
25
+ delay: 0, // start delay in seconds
26
+ direction: 'normal', //normal alternating reverse
27
+ duration: 8, // seconds
28
+ fillMode: 'forward', // node forward backward both
29
+ iterationCount: 'infinite', // number or infinte
30
+ name: 'Y360', // ** ANIMATIONS
31
+ timing: 'ease-in-out' // linear ease ease-in-out
47
32
  };
48
33
  ```
49
34
 
50
35
  `** ANIMATIONS`
51
36
 
52
- - X360: rotate 360 degrees on the x-axis
53
- - Y360: rotate 360 degrees on the y-axis
54
- - fadeInkf: fade object in from 0 to 1 Opacity
55
- - wobY: wobble on y-axis (degreesHi <-> degreesLow)
56
- - wobX: wobble on x-axis (degreesHi <-> degreesLow)
57
- - fwdx018: spin object on x-axis from 0 degrees to 180 degrees
58
- - fwdx1836: spin object on x-axis from 180 degrees to 360 degrees
59
- - fwdx09: spin object on x-axis from 0 degrees to 90 degrees
60
- - fwdx918: spin object on x-axis from 90 degrees to 180 degrees
61
- - fwdx1827: spin object on x-axis from 180 degrees to 270 degrees
62
- - fwdx2736: spin object on x-axis from 270 degrees to 360 degrees
63
- - fwdy018: spin object on y-axis from 0 degrees to 180 degrees
64
- - fwdy1836: spin object on y-axis from 180 degrees to 360 degrees
65
- - fwdy09: spin object on y-axis from 0 degrees to 90 degrees
66
- - fwdy918: spin object on y-axis from 90 degrees to 180 degrees
67
- - fwdy1827: spin object on y-axis from 180 degrees to 270 degrees
68
- - fwdy2736: spin object on y-axis from 270 degrees to 360 degrees
69
- - floatX: float object so is not stationary
70
- - floatShadow: float object + add shadow
71
- - pulseSM: pulse object Small
72
- - pulseMD: pulse object Medium
73
- - pulseLG: pulse object Large
74
- - # noAnim: no animation place holder
75
37
  - X360: rotate 360 degrees on the x-axis
76
38
  - Y360: rotate 360 degrees on the y-axis
77
39
  - fadeInkf: fade object in from 0 to 1 Opacity
@@ -95,118 +57,3 @@ const anim1Specs: object = {
95
57
  - pulseMD: pulse object Medium
96
58
  - pulseLG: pulse object Large
97
59
  - noAnim: no animation place holder
98
-
99
- <>
100
-
101
- GLOBAL CONFIG
102
-
103
- ```typescript
104
- // EXAMPLE GLOBAL FACE CONFIG
105
- // This will be applied to all Faces that do not have their own custom config
106
- const global: object = {
107
-
108
- // // face individual styles (over rides global)
109
- css: `
110
- =======
111
- // // face individual styles (over rides global)
112
- css: `
113
-
114
- border: 1px solid #fff;
115
- background: rgb(2,0,36);
116
- background: linear-gradient(180deg, rgba(255,255,255,.1) 0%, rgba(141,191,249,.7) 100%);
117
- color:white;
118
- text-align:center;
119
- line-height:10;
120
- backface-visibility: visible;
121
- font-family: Arial, Helvetica, sans-serif;
122
- border-radius:5px;
123
- `,
124
-
125
- body: ' ',
126
- }
127
- =======
128
- body: " ",
129
- };
130
- ```
131
-
132
- <>
133
-
134
- CUSTOM CONFIG FOR INDIVIDUAL FACES
135
-
136
- ```typescript
137
- const custom: object = {
138
- // // face individual styles (over rides global)
139
- front: {
140
- css: ``,
141
- body: <Login />,
142
- },
143
- left: {
144
- css: `
145
- border: 1px solid #fff;
146
- background: rgb(2,0,36);
147
- color:white;
148
- text-align: center;
149
- line-height:8;`
150
- body: " ",
151
- },
152
- right: {
153
- css: ``,
154
- body: " ",
155
- },
156
- back: {
157
- css: ``,
158
- body: <Logout />,
159
- },
160
- bottom: {
161
- css: `
162
- background-color:rgba(141,191,249,1);
163
- -webkit-box-shadow: 0px 0px 23px 18px #858585;
164
- box-shadow: 0px 0px 23px 18px #858585;
165
- `,
166
- },
167
- ```
168
-
169
- ## Render
170
-
171
- and
172
-
173
- ```typescript
174
- <Cuboid
175
- width={250}
176
- height={300}
177
- depth={250}
178
- perspective={800}
179
- perspectiveOrigin='50% 50%'
180
- zIndex={10}
181
- anim1Specs={anim1Specs}
182
- anim2Specs={anim2Specs}
183
- custom={custom}
184
- faces={faceprops}
185
- global={global}
186
- =======
187
- width={250}
188
- height={300}
189
- depth={250}
190
- perspective={800}
191
- perspectiveOrigin='50% 50%'
192
- zIndex={10}
193
- anim1Specs={anim1Specs}
194
- anim2Specs={anim2Specs}
195
- custom={custom}
196
- faces={faceprops}
197
- global={global}
198
- />
199
- ```
200
-
201
- will produce the following
202
-
203
- ![Logo](https://raw.githubusercontent.com/mdnelles/objs-local/main/img.png?token=GHSAT0AAAAAABQVNJ4VATWQM4SI3LXSTDZWYVDOL7Q)
204
-
205
- ## Authors
206
-
207
- - # [@mdnelles](https://github.com/mdnelles)
208
- - [@mdnelles](https://github.com/mdnelles)
209
-
210
- ## License
211
-
212
- [MIT](https://choosealicense.com/licenses/mit/)
package/dist/cjs/components/styles/Anims.d.ts CHANGED
@@ -10,6 +10,7 @@ export declare const allAnims: (props: AllAnimsProps) => {
10
10
  wobX: import("styled-components").Keyframes;
11
11
  fwdx018: import("styled-components").Keyframes;
12
12
  fwdx1836: import("styled-components").Keyframes;
13
+ fwdx1836true: import("styled-components").Keyframes;
13
14
  fwdx09: import("styled-components").Keyframes;
14
15
  fwdx918: import("styled-components").Keyframes;
15
16
  fwdx1827: import("styled-components").Keyframes;
@@ -17,6 +18,7 @@ export declare const allAnims: (props: AllAnimsProps) => {
17
18
  fwdx2736true: import("styled-components").Keyframes;
18
19
  fwdy018: import("styled-components").Keyframes;
19
20
  fwdy1836: import("styled-components").Keyframes;
21
+ fwdy1836true: import("styled-components").Keyframes;
20
22
  fwdy09: import("styled-components").Keyframes;
21
23
  fwdy918: import("styled-components").Keyframes;
22
24
  fwdy1827: import("styled-components").Keyframes;
package/dist/cjs/components/styles/Anims.js CHANGED
@@ -60,31 +60,46 @@ const allAnims = (props) => {
60
60
  /* ============================== x-axis 0-180 >180 - 360 */
61
61
  const fwdx018 = (0, styled_components_1.keyframes) `
62
62
  from {
63
- -webkit-transform: rotateX(360deg);
64
- transform: rotateX(360deg);
63
+ -webkit-transform: rotateX(0deg);
64
+ transform: rotateX(0deg);
65
65
  }
66
66
  to {
67
67
  -webkit-transform: rotateX(180deg);
68
68
  transform: rotateX(180deg);
69
69
  }`;
70
70
  const fwdx1836 = (0, styled_components_1.keyframes) `
71
- from {
71
+ 0% {
72
72
  -webkit-transform: rotateX(180deg);
73
73
  transform: rotateX(180deg);
74
74
  }
75
- to {
75
+ 99% {
76
+ -webkit-transform: rotateX(360deg);
77
+ transform: rotateX(360deg);
78
+ }
79
+ 100% {
76
80
  -webkit-transform: rotateX(0deg);
77
81
  transform: rotateX(0deg);
78
- }`;
82
+ }
83
+ `;
84
+ const fwdx1836true = (0, styled_components_1.keyframes) `
85
+ 0% {
86
+ -webkit-transform: rotateX(180deg);
87
+ transform: rotateX(180deg);
88
+ }
89
+ 100% {
90
+ -webkit-transform: rotateX(360deg);
91
+ transform: rotateX(360deg);
92
+ }
93
+ `;
79
94
  /* ============================= x-axis 0-90, 90-180, 180-270, 270-360 */
80
95
  const fwdx09 = (0, styled_components_1.keyframes) `
81
96
  from {
82
- -webkit-transform: rotateX(360deg);
83
- transform: rotateX(360deg);
97
+ -webkit-transform: rotateX(0deg);
98
+ transform: rotateX(0deg);
84
99
  }
85
100
  to {
86
- -webkit-transform: rotateX(90deg);
87
- transform: rotateX(90deg);
101
+ -webkit-transform: rotateX(-90deg);
102
+ transform: rotateX(-90deg);
88
103
  }`;
89
104
  const fwdx918 = (0, styled_components_1.keyframes) `
90
105
  from {
@@ -130,31 +145,45 @@ const allAnims = (props) => {
130
145
  /* ============================== y-axis 0-180 >180 - 360 */
131
146
  const fwdy018 = (0, styled_components_1.keyframes) `
132
147
  from {
133
- -webkit-transform: rotateY(360deg);
134
- transform: rotateY(360deg);
148
+ -webkit-transform: rotateY(0deg);
149
+ transform: rotateY(0deg);
135
150
  }
136
151
  to {
137
152
  -webkit-transform: rotateY(180deg);
138
153
  transform: rotateY(180deg);
139
154
  }`;
140
155
  const fwdy1836 = (0, styled_components_1.keyframes) `
141
- from {
156
+ 0% {
142
157
  -webkit-transform: rotateY(180deg);
143
158
  transform: rotateY(180deg);
144
159
  }
145
- to {
160
+ 99% {
161
+ -webkit-transform: rotateY(360deg);
162
+ transform: rotateY(360deg);
163
+ }
164
+ 100% {
146
165
  -webkit-transform: rotateY(0deg);
147
166
  transform: rotateY(0deg);
167
+ }
168
+ `;
169
+ const fwdy1836true = (0, styled_components_1.keyframes) `
170
+ from {
171
+ -webkit-transform: rotateY(180deg);
172
+ transform: rotateY(180deg);
173
+ }
174
+ to {
175
+ -webkit-transform: rotateY(360deg);
176
+ transform: rotateY(360deg);
148
177
  }`;
149
178
  /* ============================= y-axis 0-90, 90-180, 180-270, 270-360 */
150
179
  const fwdy09 = (0, styled_components_1.keyframes) `
151
180
  from {
152
- -webkit-transform: rotateY(360deg);
153
- transform: rotateY(360deg);
181
+ -webkit-transform: rotateY(0deg);
182
+ transform: rotateY(0deg);
154
183
  }
155
184
  to {
156
- -webkit-transform: rotateY(90deg);
157
- transform: rotateY(90deg);
185
+ -webkit-transform: rotateY(-90deg);
186
+ transform: rotateY(-90deg);
158
187
  }`;
159
188
  const fwdy918 = (0, styled_components_1.keyframes) `
160
189
  from {
@@ -281,6 +310,7 @@ const allAnims = (props) => {
281
310
  wobX,
282
311
  fwdx018,
283
312
  fwdx1836,
313
+ fwdx1836true,
284
314
  fwdx09,
285
315
  fwdx918,
286
316
  fwdx1827,
@@ -288,6 +318,7 @@ const allAnims = (props) => {
288
318
  fwdx2736true,
289
319
  fwdy018,
290
320
  fwdy1836,
321
+ fwdy1836true,
291
322
  fwdy09,
292
323
  fwdy918,
293
324
  fwdy1827,
package/dist/cjs/components/styles/Anims.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Anims.js","sourceRoot":"","sources":["../../../../src/components/styles/Anims.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Anims.js","sourceRoot":"","sources":["../../../../src/components/styles/Anims.ts"],"names":[],"mappings":"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"}
package/dist/esm/components/styles/Anims.d.ts CHANGED
@@ -10,6 +10,7 @@ export declare const allAnims: (props: AllAnimsProps) => {
10
10
  wobX: import("styled-components").Keyframes;
11
11
  fwdx018: import("styled-components").Keyframes;
12
12
  fwdx1836: import("styled-components").Keyframes;
13
+ fwdx1836true: import("styled-components").Keyframes;
13
14
  fwdx09: import("styled-components").Keyframes;
14
15
  fwdx918: import("styled-components").Keyframes;
15
16
  fwdx1827: import("styled-components").Keyframes;
@@ -17,6 +18,7 @@ export declare const allAnims: (props: AllAnimsProps) => {
17
18
  fwdx2736true: import("styled-components").Keyframes;
18
19
  fwdy018: import("styled-components").Keyframes;
19
20
  fwdy1836: import("styled-components").Keyframes;
21
+ fwdy1836true: import("styled-components").Keyframes;
20
22
  fwdy09: import("styled-components").Keyframes;
21
23
  fwdy918: import("styled-components").Keyframes;
22
24
  fwdy1827: import("styled-components").Keyframes;
package/dist/esm/components/styles/Anims.js CHANGED
@@ -57,31 +57,46 @@ export const allAnims = (props) => {
57
57
  /* ============================== x-axis 0-180 >180 - 360 */
58
58
  const fwdx018 = keyframes `
59
59
  from {
60
- -webkit-transform: rotateX(360deg);
61
- transform: rotateX(360deg);
60
+ -webkit-transform: rotateX(0deg);
61
+ transform: rotateX(0deg);
62
62
  }
63
63
  to {
64
64
  -webkit-transform: rotateX(180deg);
65
65
  transform: rotateX(180deg);
66
66
  }`;
67
67
  const fwdx1836 = keyframes `
68
- from {
68
+ 0% {
69
69
  -webkit-transform: rotateX(180deg);
70
70
  transform: rotateX(180deg);
71
71
  }
72
- to {
72
+ 99% {
73
+ -webkit-transform: rotateX(360deg);
74
+ transform: rotateX(360deg);
75
+ }
76
+ 100% {
73
77
  -webkit-transform: rotateX(0deg);
74
78
  transform: rotateX(0deg);
75
- }`;
79
+ }
80
+ `;
81
+ const fwdx1836true = keyframes `
82
+ 0% {
83
+ -webkit-transform: rotateX(180deg);
84
+ transform: rotateX(180deg);
85
+ }
86
+ 100% {
87
+ -webkit-transform: rotateX(360deg);
88
+ transform: rotateX(360deg);
89
+ }
90
+ `;
76
91
  /* ============================= x-axis 0-90, 90-180, 180-270, 270-360 */
77
92
  const fwdx09 = keyframes `
78
93
  from {
79
- -webkit-transform: rotateX(360deg);
80
- transform: rotateX(360deg);
94
+ -webkit-transform: rotateX(0deg);
95
+ transform: rotateX(0deg);
81
96
  }
82
97
  to {
83
- -webkit-transform: rotateX(90deg);
84
- transform: rotateX(90deg);
98
+ -webkit-transform: rotateX(-90deg);
99
+ transform: rotateX(-90deg);
85
100
  }`;
86
101
  const fwdx918 = keyframes `
87
102
  from {
@@ -127,31 +142,45 @@ export const allAnims = (props) => {
127
142
  /* ============================== y-axis 0-180 >180 - 360 */
128
143
  const fwdy018 = keyframes `
129
144
  from {
130
- -webkit-transform: rotateY(360deg);
131
- transform: rotateY(360deg);
145
+ -webkit-transform: rotateY(0deg);
146
+ transform: rotateY(0deg);
132
147
  }
133
148
  to {
134
149
  -webkit-transform: rotateY(180deg);
135
150
  transform: rotateY(180deg);
136
151
  }`;
137
152
  const fwdy1836 = keyframes `
138
- from {
153
+ 0% {
139
154
  -webkit-transform: rotateY(180deg);
140
155
  transform: rotateY(180deg);
141
156
  }
142
- to {
157
+ 99% {
158
+ -webkit-transform: rotateY(360deg);
159
+ transform: rotateY(360deg);
160
+ }
161
+ 100% {
143
162
  -webkit-transform: rotateY(0deg);
144
163
  transform: rotateY(0deg);
164
+ }
165
+ `;
166
+ const fwdy1836true = keyframes `
167
+ from {
168
+ -webkit-transform: rotateY(180deg);
169
+ transform: rotateY(180deg);
170
+ }
171
+ to {
172
+ -webkit-transform: rotateY(360deg);
173
+ transform: rotateY(360deg);
145
174
  }`;
146
175
  /* ============================= y-axis 0-90, 90-180, 180-270, 270-360 */
147
176
  const fwdy09 = keyframes `
148
177
  from {
149
- -webkit-transform: rotateY(360deg);
150
- transform: rotateY(360deg);
178
+ -webkit-transform: rotateY(0deg);
179
+ transform: rotateY(0deg);
151
180
  }
152
181
  to {
153
- -webkit-transform: rotateY(90deg);
154
- transform: rotateY(90deg);
182
+ -webkit-transform: rotateY(-90deg);
183
+ transform: rotateY(-90deg);
155
184
  }`;
156
185
  const fwdy918 = keyframes `
157
186
  from {
@@ -278,6 +307,7 @@ export const allAnims = (props) => {
278
307
  wobX,
279
308
  fwdx018,
280
309
  fwdx1836,
310
+ fwdx1836true,
281
311
  fwdx09,
282
312
  fwdx918,
283
313
  fwdx1827,
@@ -285,6 +315,7 @@ export const allAnims = (props) => {
285
315
  fwdx2736true,
286
316
  fwdy018,
287
317
  fwdy1836,
318
+ fwdy1836true,
288
319
  fwdy09,
289
320
  fwdy918,
290
321
  fwdy1827,
package/dist/esm/components/styles/Anims.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Anims.js","sourceRoot":"","sources":["../../../../src/components/styles/Anims.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAO9C,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAE,EAAE;IAC7C,MAAM,EAAE,UAAU,GAAG,CAAC,EAAE,SAAS,GAAG,CAAC,EAAE,GAAG,KAAK,CAAC;IAEhD,MAAM,IAAI,GAAG,SAAS,CAAA;;;;;;;;;EASxB,CAAC;IAEC,aAAa;IACb,MAAM,IAAI,GAAG,SAAS,CAAA;;;;;;;;MAQpB,CAAC;IAEH,MAAM,QAAQ,GAAG,SAAS,CAAA;;;;;;MAMxB,CAAC;IAEH,MAAM,IAAI,GAAG,SAAS,CAAA;;qCAEW,UAAU;6BAClB,UAAU;;;qCAGF,SAAS;6BACjB,SAAS;;;qCAGD,UAAU;6BAClB,UAAU;MACjC,CAAC;IAEH,MAAM,IAAI,GAAG,SAAS,CAAA;;qCAEW,UAAU;6BAClB,UAAU;;;qCAGF,SAAS;6BACjB,SAAS;;;qCAGD,UAAU;6BAClB,UAAU;MACjC,CAAC;IACH,4DAA4D;IAC5D,MAAM,OAAO,GAAG,SAAS,CAAA;;;;;;;;MAQvB,CAAC;IACH,MAAM,QAAQ,GAAG,SAAS,CAAA;;;;;;;;MAQxB,CAAC;IACH,yEAAyE;IACzE,MAAM,MAAM,GAAG,SAAS,CAAA;;;;;;;;MAQtB,CAAC;IACH,MAAM,OAAO,GAAG,SAAS,CAAA;;;;;;;;MAQvB,CAAC;IACH,MAAM,QAAQ,GAAG,SAAS,CAAA;;;;;;;;MAQxB,CAAC;IACH,MAAM,QAAQ,GAAG,SAAS,CAAA;;;;;;;;;;;;;KAazB,CAAC;IACF,MAAM,YAAY,GAAG,SAAS,CAAA;;;;;;;;MAQ5B,CAAC;IACH,4DAA4D;IAC5D,MAAM,OAAO,GAAG,SAAS,CAAA;;;;;;;;KAQxB,CAAC;IACF,MAAM,QAAQ,GAAG,SAAS,CAAA;;;;;;;;KAQzB,CAAC;IAEF,yEAAyE;IACzE,MAAM,MAAM,GAAG,SAAS,CAAA;;;;;;;;KAQvB,CAAC;IACF,MAAM,OAAO,GAAG,SAAS,CAAA;;;;;;;;KAQxB,CAAC;IACF,MAAM,QAAQ,GAAG,SAAS,CAAA;;;;;;;;KAQzB,CAAC;IACF,MAAM,QAAQ,GAAG,SAAS,CAAA;;;;;;;;;;;;;IAa1B,CAAC;IACD,MAAM,YAAY,GAAG,SAAS,CAAA;;;;;;;;KAQ7B,CAAC;IACF,4CAA4C;IAC5C,MAAM,MAAM,GAAG,SAAS,CAAA;;;uHAG2F,CAAC;IAEpH,MAAM,WAAW,GAAG,SAAS,CAAA;;;;;;;;;;;;;;;;;;;;;UAqBvB,CAAC;IAEP,MAAM,OAAO,GAAG,SAAS,CAAA;;;;;;;;;;;;;;;MAevB,CAAC;IAEH,MAAM,OAAO,GAAG,SAAS,CAAA;;;;;;;;;;;;;;;OAetB,CAAC;IAEJ,MAAM,OAAO,GAAG,SAAS,CAAA;;;;;;;;;;;;;;;OAetB,CAAC;IAEJ,MAAM,MAAM,GAAG,SAAS,CAAA,EAAE,CAAC;IAE3B,OAAO;QACH,IAAI;QACJ,IAAI;QACJ,QAAQ;QACR,IAAI;QACJ,IAAI;QACJ,OAAO;QACP,QAAQ;QACR,MAAM;QACN,OAAO;QACP,QAAQ;QACR,QAAQ;QACR,YAAY;QACZ,OAAO;QACP,QAAQ;QACR,MAAM;QACN,OAAO;QACP,QAAQ;QACR,QAAQ;QACR,YAAY;QACZ,MAAM;QACN,WAAW;QACX,OAAO;QACP,OAAO;QACP,OAAO;QACP,MAAM;KACT,CAAC;AACN,CAAC,CAAC"}
1
+ {"version":3,"file":"Anims.js","sourceRoot":"","sources":["../../../../src/components/styles/Anims.ts"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -5,7 +5,7 @@
5
5
  "url": "https://github.com/mdnelles/anim-3d-objs",
6
6
  "homepage": "https://github.com/mdnelles/anim-3d-objs/blob/main/README.md"
7
7
  },
8
- "version": "1.1.28",
8
+ "version": "1.1.31",
9
9
  "description": "A component library for getting people started with easy to re-use components for everyday projects.",
10
10
  "main": "dist/cjs/index.js",
11
11
  "module": "dist/esm/index.js",