anim-3d-obj 1.1.73 → 1.2.2

package/README.md

@@ -12,25 +12,6 @@ The program does the leg work with regard to calculating translationZ depth and
 -  [Parallel divs animated x and y axis in tandem](https://codesandbox.io/s/anim-3d-obj-2-sides-simple-4057y7)
 -  [Obj Skeleton](https://codesandbox.io/s/anim-3d-obj-skeleton-5dlk70)
 
-## Config
-
-Animations are optional. Either or both of `anim1` or `anim2` can be applied to the component.
-
-```typescript
-const anim1 = {
-   border: "", // while testing reveal the animation wrapper
-   degreesHi: -45, // degrees if spin
-   degreesLow: 45, // degrees if spin
-   delay: 0, // start delay in seconds
-   direction: "normal", //normal alternating reverse
-   duration: 8, // seconds
-   fillMode: "forwards", // none forwards backwards both
-   iterationCount: "infinite", // number or infinte
-   name: "Y360", // ** ANIMATIONS
-   timing: "ease-in-out", // linear ease ease-in-out
-};
-```
-
 `** ANIMATIONS`
 
 -  `fadeInkf`: fade object in from 0 to 1 Opacity: [demo](https://codesandbox.io/s/anim-3d-obj-fadeinkf-1fozww)
@@ -43,7 +24,6 @@ const anim1 = {
 -  `swingDecay`: Swing component with decay: [demo](https://codesandbox.io/s/anim-3d-obj-swingdecay-cku0e1)
 -  `noAnim`: no animation place holder
 
-
 `X-AXIS Animations`
 -  `X360`: rotate 360 degrees on the x-axis: [demo](https://codesandbox.io/s/anim-3d-obj-x360-7kiuhw)
 -  `wobX`: wobble on x-axis (degreesHi <-> degreesLow): [demo](https://codesandbox.io/s/anim-3d-obj-wobx-ldwek7)
@@ -63,68 +43,65 @@ const anim1 = {
 -  `fwdy918`: spin object on y-axis from 90 degrees to 180 degrees: [demo](https://codesandbox.io/s/anim-3d-obj-fwdy918-gnym88)
 -  `fwdy1827`: spin object on y-axis from 180 degrees to 270 degrees: [demo](https://codesandbox.io/s/anim-3d-obj-fwdy1827-osskgx)
 -  `fwdy2736`: spin object on y-axis from 270 degrees to 360 degrees: [demo](https://codesandbox.io/s/anim-3d-obj-fwdy2736-rnbs2q)
--  
 
 
-<>
+## Config
+### Animations:
 
-GLOBAL CONFIG
+Animations are optional. Either or both of `anim1` or `anim2` can be applied to the component. Animations are applied to 2 wrapping divs respectively.
 
 ```typescript
-// EXAMPLE GLOBAL FACE CONFIG
-// This will be applied to all Faces that do not have their own custom config
-const global: object = {
-   // // face individual styles (over rides global)
-   css: `
-         border: 1px solid #fff;
-         background: rgb(2,0,36);
-         background: linear-gradient(180deg, rgba(255,255,255,.1) 0%, rgba(141,191,249,.7) 100%);
-         color:white;
-         text-align:center;
-         line-height:10;
-         backface-visibility: visible;
-         font-family: Arial, Helvetica, sans-serif;
-         border-radius:5px;
-         `,
-   body: " ",
+const anim1 = {
+   border: "", // while testing reveal the animation wrapper
+   degreesHi: -45, // degrees if spin
+   degreesLow: 45, // degrees if spin
+   delay: 0, // start delay in seconds
+   direction: "normal", //normal alternating reverse
+   duration: 8, // seconds
+   fillMode: "forwards", // none forwards backwards both
+   iterationCount: "infinite", // number or infinte
+   name: "Y360", // ** ANIMATIONS (above)
+   timing: "ease-in-out", // linear ease ease-in-out
 };
 ```
 
-<>
-
-CUSTOM CONFIG FOR INDIVIDUAL FACES
-
-```typescript
-const custom: object = {
-      // // face individual styles (over rides global)
-      front: {
-         css: ``,
-         body: <Login />,
-      },
-      left: {
-         css: `
-         border: 1px solid #fff;
-         background: rgb(2,0,36);
-         color:white;
-         text-align: center;
-         line-height:8;`
-         body: " ",
-      },
-      right: {
-         css: ``,
-         body: " ",
-      },
-      back: {
-         css: ``,
-         body: <Logout />,
+### Faces:
+This is an array of objects containing the face used for a given component
+```javascript
+   export interface FaceType {
+      name?: string; // front,back,left,right,top,top_rear,top_front,bottom,bottom_rear,bottom_front
+      css?: string | undefined;
+      body?: any; // can be JSX Component | string | number
+   }
+
+   const faces: FaceType[] = [
+      {
+         name: "back",
+         body: "BACK",
+         css: `background:rgba(22,22,22,.5)`,
       },
-      bottom: {
-         css: `
-         background-color:rgba(141,191,249,1);
-         -webkit-box-shadow: 0px 0px 23px 18px #858585;
-         box-shadow: 0px 0px 23px 18px #858585;
-         `,
+      {
+         name: "right",
+         body: "RIGHT",
+         css: `background:rgba(220,220,220,.5); 
+               border:1px solid #ddd`,
       },
+   ];
 ```
-## NPM Location
+
+### Global (face):
+If the name parameter in the faces array is indicated (ie: "front") but `css` and / or `body` are not.  The `global default`(below) will satisfy those parameters.
+```javascript
+   interface GlobalType {
+      css?: string;
+      body?: string;
+   }
+   const global: GlobalType = {
+      body: "BODY FOR FACE WHICH DOES NOT CONTAIN BODY",
+      css: 'color:red'
+   };
+```
+
+![all sides](https://github.com/mdnelles/anim-3d-obj-npm-publisher/blob/4a9769a6386a3b5425ede9a04b346d5461051ae0/ang1.png?raw=true)
+
  - https://www.npmjs.com/package/anim-3d-obj

package/dist/cjs/components/Face.d.ts

@@ -0,0 +1,11 @@
+import { FaceType } from "./types";
+interface FaceProps {
+    children?: any;
+    depth?: number | any;
+    face: FaceType;
+    global?: any;
+    height?: number | string;
+    width?: number | string;
+}
+export default function Face(props: FaceProps): JSX.Element;
+export {};

package/dist/cjs/components/Face.js

@@ -0,0 +1,106 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+function Face(props) {
+    let { depth = 10, global = { css: "", body: "" }, height = 10, face, width = 100, } = props;
+    console.log(face);
+    let transform;
+    let tranz = +height / 2;
+    const body = face.body ? face.body : global.body;
+    ////////////////////////////////////////////////////////////////////////////// BOTTOM
+    if (face.name === "bottom") {
+        tranz = +height - +depth / 2;
+        height = +depth;
+        transform = `transform: rotateX(-90deg) translateZ(${tranz}px);`;
+    }
+    else if (face.name === "bottom_rear") {
+        tranz = +height - +depth / 2;
+        height = +depth;
+        transform = `transform: rotateX(-90deg) translateZ(${tranz}px)  translateY(${height}px)  `;
+    }
+    else if (face.name === "bottom_front") {
+        tranz = +height - +depth / 2;
+        height = +depth;
+        transform = `transform: rotateX(-90deg) translateZ(${tranz}px)  translateY(${-height}px)  `;
+        ////////////////////////////////////////////////////////////////////////////// TOPS
+    }
+    else if (face.name === "top") {
+        height = +depth;
+        if (!!depth)
+            tranz = +depth / 2;
+        transform = `transform: rotateX(90deg) translateZ(${tranz}px);`;
+    }
+    else if (face.name === "top_rear") {
+        height = +depth;
+        if (!!depth)
+            tranz = +depth / 2;
+        let offset = depth / 2;
+        //translate3d(tx, ty, tz)
+        transform = `transform: rotateX(90deg) translateZ(${tranz}px) translateY(-${tranz * 2}px)  `;
+    }
+    else if (face.name === "top_front") {
+        height = +depth;
+        if (!!depth)
+            tranz = +depth / 2;
+        let offset = depth / 2;
+        //translate3d(tx, ty, tz)
+        transform = `transform: rotateX(90deg) translateZ(${tranz}px) translateY(${tranz * 2}px)  `;
+    }
+    else if (face.name === "front") {
+        if (!!depth)
+            tranz = +depth / 2;
+        transform = `transform: rotateY(0deg) translateZ(${tranz}px);`;
+    }
+    else if (face.name === "back") {
+        if (!!depth)
+            tranz = +depth / 2;
+        transform = `transform: rotateY(180deg) translateZ(${tranz}px);`;
+    }
+    else if (face.name === "right") {
+        if (height > width && !depth) {
+            tranz = -(+height / 2 - +width);
+            width = +height;
+        }
+        else if (width > height && !depth) {
+            tranz = +height / 2;
+            height = +width;
+        }
+        else {
+            tranz = +width - +depth / 2;
+            width = +depth;
+        }
+        transform = `transform: rotateY(90deg) translateZ(${tranz}px);`;
+        // topr is to of Ribbon which points back
+    }
+    else if (face.name === "left") {
+        if (height > width && !depth) {
+            tranz = -(+height / 2 - +width);
+            width = +height;
+        }
+        else if (width > height && !depth) {
+            tranz = +height / 2;
+            height = +width;
+        }
+        else {
+            tranz = +depth / 2;
+            width = +depth;
+        }
+        transform = `transform: rotateY(-90deg) translateZ(${tranz}px);`;
+    }
+    else {
+        console.log(face.name + " is not a recognized face.name");
+    }
+    const Specs = styled_components_1.default.section `
+    ${face.css || global.css}
+    width: ${width}px;
+    position: absolute;
+    height: ${height}px;
+    ${transform}
+  `;
+    return react_1.default.createElement(Specs, null, body);
+}
+exports.default = Face;

package/dist/cjs/components/Obj.d.ts

@@ -0,0 +1,2 @@
+import { ObjProps } from "./types";
+export default function (props: ObjProps): JSX.Element;

package/dist/cjs/components/Obj.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const Global_1 = require("./styles/Global");
+const AnimWrap_1 = require("./styles/AnimWrap");
+const Scene_1 = require("./styles/Scene");
+const Face_1 = __importDefault(require("./Face"));
+function default_1(props) {
+    let { anim1, anim2, width = 5, height = 5, depth = 5, global = {}, faces, perspective, perspectiveOrigin, zIndex, } = props;
+    // process config
+    const buildFace = (face) => {
+        const details = {
+            width,
+            height,
+            depth,
+            face,
+            global,
+        };
+        return react_1.default.createElement(Face_1.default, Object.assign({}, details, { key: face.name }));
+    };
+    return (react_1.default.createElement(Scene_1.SceneStyle, { width: width, height: height, perspective: perspective, perspectiveOrigin: perspectiveOrigin, zIndex: zIndex },
+        react_1.default.createElement(AnimWrap_1.AnimWrap, { animSpecs: anim1 },
+            react_1.default.createElement(AnimWrap_1.AnimWrap, { animSpecs: anim2 },
+                react_1.default.createElement(Global_1.ObjWrapper, null, faces && faces[0]
+                    ? faces.map((face) => (face.name ? buildFace(face) : null))
+                    : null)))));
+}
+exports.default = default_1;

package/dist/cjs/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Obj";
+export * from "./Face";

package/dist/cjs/components/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Obj"), exports);
+__exportStar(require("./Face"), exports);

package/dist/cjs/components/styles/AnimWrap.d.ts

@@ -0,0 +1,2 @@
+import { AnimStylesProps } from "./Anim";
+export declare const AnimWrap: (props: AnimStylesProps) => JSX.Element;

package/dist/cjs/components/styles/AnimWrap.js

@@ -0,0 +1,88 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnimWrap = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const react_1 = __importDefault(require("react"));
+const Anims_1 = require("./Anims");
+const AnimWrap = (props) => {
+    const { children, animSpecs } = props;
+    const AS = animSpecs;
+    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 });
+    let theAnim = "noAnim";
+    if (AS.name === "X360")
+        theAnim = X360;
+    else if (AS.name === "Y360")
+        theAnim = Y360;
+    else if (AS.name === "fadeInkf")
+        theAnim = fadeInkf;
+    else if (AS.name === "wobX")
+        theAnim = wobX;
+    else if (AS.name === "wobY")
+        theAnim = wobY;
+    else if (AS.name === "fwdx018")
+        theAnim = fwdx018;
+    else if (AS.name === "fwdx1836")
+        theAnim = fwdx1836;
+    else if (AS.name === "fwdx09")
+        theAnim = fwdx09;
+    else if (AS.name === "fwdx918")
+        theAnim = fwdx918;
+    else if (AS.name === "fwdx1827")
+        theAnim = fwdx1827;
+    else if (AS.name === "fwdx2736")
+        theAnim = fwdx2736;
+    else if (AS.name === "fwdy018")
+        theAnim = fwdy018;
+    else if (AS.name === "fwdy1836")
+        theAnim = fwdy1836;
+    else if (AS.name === "fwdy09")
+        theAnim = fwdy09;
+    else if (AS.name === "fwdy918")
+        theAnim = fwdy918;
+    else if (AS.name === "fwdy1827")
+        theAnim = fwdy1827;
+    else if (AS.name === "fwdy2736")
+        theAnim = fwdy2736;
+    else if (AS.name === "floatX")
+        theAnim = floatX;
+    else if (AS.name === "floatShadow")
+        theAnim = floatShadow;
+    else if (AS.name === "pulseSM")
+        theAnim = pulseSM;
+    else if (AS.name === "pulseMD")
+        theAnim = pulseMD;
+    else if (AS.name === "pulseLG")
+        theAnim = pulseLG;
+    else if (AS.name === "swing")
+        theAnim = swing;
+    else if (AS.name === "swingDecay")
+        theAnim = swingDecay;
+    else
+        theAnim = noAnim;
+    const AnimWrapDiv = styled_components_1.default.div `
+    width: 100%;
+    height: 100%;
+    position: relative;
+    transform-style: preserve-3d;
+    border: ${AS.border};
+    -webkit-animation-duration: ${AS.duration}s;
+    animation-duration: ${AS.duration}s;
+    -webkit-animation-iteration-count: ${AS.iterationCount};
+    animation-iteration-count: ${AS.iterationCount};
+    -webkit-animation-name: ${theAnim};
+    animation-name: ${theAnim};
+    -webkit-animation-fill-mode: ${AS.fillMode};
+    animation-fill-mode: ${AS.fillMode};
+    animation-direction: ${AS.direction};
+    -webkit-animation-direction: ${AS.direction};
+    -webkit-animation-timing-function: ${AS.timing};
+    animation-timing-function: ${AS.timing};
+    -webkit-animation-delay: ${AS.delay}s;
+    animation-delay: ${AS.delay}s;
+  `;
+    return react_1.default.createElement(AnimWrapDiv, null, children);
+};
+exports.AnimWrap = AnimWrap;

package/dist/cjs/components/styles/Anims.d.ts

@@ -0,0 +1,32 @@
+interface AllAnimsProps {
+    degreesLow?: number;
+    degreesHi?: number;
+}
+export declare const allAnims: (props: AllAnimsProps) => {
+    X360: import("styled-components").Keyframes;
+    Y360: import("styled-components").Keyframes;
+    fadeInkf: import("styled-components").Keyframes;
+    wobY: import("styled-components").Keyframes;
+    wobX: import("styled-components").Keyframes;
+    fwdx018: import("styled-components").Keyframes;
+    fwdx1836: import("styled-components").Keyframes;
+    fwdx09: import("styled-components").Keyframes;
+    fwdx918: import("styled-components").Keyframes;
+    fwdx1827: import("styled-components").Keyframes;
+    fwdx2736: import("styled-components").Keyframes;
+    fwdy018: import("styled-components").Keyframes;
+    fwdy1836: import("styled-components").Keyframes;
+    fwdy09: import("styled-components").Keyframes;
+    fwdy918: import("styled-components").Keyframes;
+    fwdy1827: import("styled-components").Keyframes;
+    fwdy2736: import("styled-components").Keyframes;
+    floatX: import("styled-components").Keyframes;
+    floatShadow: import("styled-components").Keyframes;
+    pulseSM: import("styled-components").Keyframes;
+    pulseMD: import("styled-components").Keyframes;
+    pulseLG: import("styled-components").Keyframes;
+    swing: import("styled-components").Keyframes;
+    swingDecay: import("styled-components").Keyframes;
+    noAnim: import("styled-components").Keyframes;
+};
+export {};

package/dist/cjs/components/styles/Anims.js

@@ -0,0 +1,329 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.allAnims = void 0;
+const styled_components_1 = require("styled-components");
+const allAnims = (props) => {
+    const { degreesLow = 0, degreesHi = 0 } = props;
+    const swing = (0, styled_components_1.keyframes) `
+    0% {
+        -webkit-transform-origin: top;
+            -ms-transform-origin: top;
+                transform-origin: top;
+        -webkit-transform: perspective(550px) rotateX(77deg);
+                transform: perspective(550px) rotateX(77deg);
+      }
+      50% {
+        -webkit-transform: perspective(550px) rotateX(-77deg);
+                transform: perspective(550px) rotateX(-77deg);
+      }
+      100% {
+        -webkit-transform-origin: top;
+            -ms-transform-origin: top;
+                transform-origin: top;
+        -webkit-transform: perspective(550px) rotateX(77deg);
+                transform: perspective(550px) rotateX(77deg);
+      }
+  `;
+    const swingDecay = (0, styled_components_1.keyframes) `
+   0% {
+    -webkit-transform-origin: top;
+        -ms-transform-origin: top;
+            transform-origin: top;
+    -webkit-transform: perspective(550px) rotateX(77deg);
+            transform: perspective(550px) rotateX(77deg);
+    }  
+    20% {
+        -webkit-transform: perspective(550px) rotateX(-55deg);
+                transform: perspective(550px) rotateX(-55deg);
+    }
+    40% {
+        -webkit-transform: perspective(550px) rotateX(44deg);
+                transform: perspective(550px) rotateX(44deg);
+    }
+
+    60% {
+        -webkit-transform: perspective(550px) rotateX(-22deg);
+                transform: perspective(550px) rotateX(-22deg);
+    }
+
+    80% {
+        -webkit-transform: perspective(550px) rotateX(11deg);
+                transform: perspective(550px) rotateX(11deg);
+    }
+    100% {
+        -webkit-transform-origin: top;
+            -ms-transform-origin: top;
+                transform-origin: top;
+        -webkit-transform:  perspective(550px)  rotateX(0);
+                transform:  perspective(550px)  rotateX(0);
+    }
+    `;
+    const X360 = (0, styled_components_1.keyframes) `
+   from {
+      -webkit-transform: rotateX(360deg);
+      transform: rotateX(360deg);
+   }
+   to {
+      -webkit-transform: rotateX(0deg);
+      transform: rotateX(0deg);
+   }`;
+    //////// Y360
+    const Y360 = (0, styled_components_1.keyframes) `
+    from {
+        -webkit-transform: rotateY(360deg);
+        transform: rotateY(360deg);
+    }
+    to {
+        -webkit-transform: rotateY(0deg);
+        transform: rotateY(0deg);
+    }`;
+    const fadeInkf = (0, styled_components_1.keyframes) `
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }`;
+    const wobY = (0, styled_components_1.keyframes) `
+    0% {
+        -webkit-transform: rotateY(${degreesLow}deg);
+        transform: rotateY(${degreesLow}deg);
+    }
+    50% {
+        -webkit-transform: rotateY(${degreesHi}deg);
+        transform: rotateY(${degreesHi}deg);
+    }
+    100% {
+        -webkit-transform: rotateY(${degreesLow}deg);
+        transform: rotateY(${degreesLow}deg);
+    }`;
+    const wobX = (0, styled_components_1.keyframes) `
+    0% {
+        -webkit-transform: rotateX(${degreesLow}deg);
+        transform: rotateX(${degreesLow}deg);
+    }
+    50% {
+        -webkit-transform: rotateX(${degreesHi}deg);
+        transform: rotateX(${degreesHi}deg);
+    }
+    100% {
+        -webkit-transform: rotateX(${degreesLow}deg);
+        transform: rotateX(${degreesLow}deg);
+    }`;
+    /* ============================== x-axis 0-180 >180 - 360 */
+    const fwdx018 = (0, styled_components_1.keyframes) `
+    from {
+        -webkit-transform: rotateX(360deg);
+        transform: rotateX(360deg);
+    }
+    to {
+        -webkit-transform: rotateX(180deg);
+        transform: rotateX(180deg);
+    }`;
+    const fwdx1836 = (0, styled_components_1.keyframes) `
+    from {
+        -webkit-transform: rotateX(180deg);
+        transform: rotateX(180deg);
+    }
+    to {
+        -webkit-transform: rotateX(0deg);
+        transform: rotateX(0deg);
+    }`;
+    /* ============================= x-axis 0-90, 90-180, 180-270, 270-360 */
+    const fwdx09 = (0, styled_components_1.keyframes) `
+    from {
+       -webkit-transform: rotateX(0deg);
+       transform: rotateX(0deg);
+    }
+    to {
+       -webkit-transform: rotateX(90deg);
+       transform: rotateX(90deg);
+    }`;
+    const fwdx918 = (0, styled_components_1.keyframes) `
+    from {
+        -webkit-transform: rotateX(90deg);
+        transform: rotateX(90deg);
+    }
+    to {
+        -webkit-transform: rotateX(180deg);
+        transform: rotateX(180deg);
+    }`;
+    const fwdx1827 = (0, styled_components_1.keyframes) `
+    from {
+        -webkit-transform: rotateX(180deg);
+        transform: rotateX(180deg);
+    }
+    to {
+        -webkit-transform: rotateX(270deg);
+        transform: rotateX(270deg);
+    }`;
+    const fwdx2736 = (0, styled_components_1.keyframes) `
+    from {
+        -webkit-transform: rotateX(270deg);
+        transform: rotateX(270deg);
+    }
+    to {
+        -webkit-transform: rotateX(360deg);
+        transform: rotateX(360deg);
+    }`;
+    /* ============================== y-axis 0-180 >180 - 360 */
+    const fwdy018 = (0, styled_components_1.keyframes) `
+   from {
+       -webkit-transform: rotateY(0deg);
+       transform: rotateY(0deg);
+   }
+   to {
+       -webkit-transform: rotateY(180deg);
+       transform: rotateY(180deg);
+   }`;
+    const fwdy1836 = (0, styled_components_1.keyframes) `
+   from {
+       -webkit-transform: rotateY(180deg);
+       transform: rotateY(180deg);
+   }
+   to {
+       -webkit-transform: rotateY(0deg);
+       transform: rotateY(0deg);
+   }`;
+    /* ============================= y-axis 0-90, 90-180, 180-270, 270-360 */
+    const fwdy09 = (0, styled_components_1.keyframes) `
+   from {
+      -webkit-transform: rotateY(0deg);
+      transform: rotateY(0deg);
+   }
+   to {
+      -webkit-transform: rotateY(90deg);
+      transform: rotateY(90deg);
+   }`;
+    const fwdy918 = (0, styled_components_1.keyframes) `
+   from {
+       -webkit-transform: rotateY(90deg);
+       transform: rotateY(90deg);
+   }
+   to {
+       -webkit-transform: rotateY(180deg);
+       transform: rotateY(180deg);
+   }`;
+    const fwdy1827 = (0, styled_components_1.keyframes) `
+   from {
+       -webkit-transform: rotateY(180deg);
+       transform: rotateY(180deg);
+   }
+   to {
+       -webkit-transform: rotateY(270deg);
+       transform: rotateY(270deg);
+   }`;
+    const fwdy2736 = (0, styled_components_1.keyframes) `
+   from {
+       -webkit-transform: rotateY(270deg);
+       transform: rotateY(270deg);
+   }
+   to {
+       -webkit-transform: rotateY(360deg);
+       transform: rotateY(360deg);
+   }`;
+    /* ============================= floating */
+    const floatX = (0, styled_components_1.keyframes) `
+   0% { -webkit-transform: translate(0,  0px); -ms-transform: translate(0,  0px); transform: translate(0,  0px); }
+   50%  { -webkit-transform: translate(0, 15px); -ms-transform: translate(0, 15px); transform: translate(0, 15px); }
+   100%   { -webkit-transform: translate(0, -0px); -ms-transform: translate(0, -0px); transform: translate(0, -0px); }`;
+    const floatShadow = (0, styled_components_1.keyframes) `
+        0% {
+            -webkit-box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
+                    box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
+            -webkit-transform: translateY(0px);
+                -ms-transform: translateY(0px);
+                    transform: translateY(0px);
+        }
+        50% {
+            -webkit-box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
+                    box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
+            -webkit-transform: translateY(-20px);
+                -ms-transform: translateY(-20px);
+                    transform: translateY(-20px);
+        }
+        100% {
+            -webkit-box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
+                    box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
+            -webkit-transform: translateY(0px);
+                -ms-transform: translateY(0px);
+                    transform: translateY(0px);
+        }`;
+    const pulseSM = (0, styled_components_1.keyframes) `
+   0% {
+    -webkit-transform: scale(0.9);
+        -ms-transform: scale(0.9);
+            transform: scale(0.9);
+    }
+    70% {
+        -webkit-transform: scale(1);
+            -ms-transform: scale(1);
+                transform: scale(1);
+    }
+    100% {
+        -webkit-transform: scale(0.9);
+            -ms-transform: scale(0.9);
+                transform: scale(0.9);
+    }`;
+    const pulseMD = (0, styled_components_1.keyframes) `
+    0% {
+     -webkit-transform: scale(0.7);
+         -ms-transform: scale(0.7);
+             transform: scale(0.7);
+     }
+     70% {
+         -webkit-transform: scale(1);
+             -ms-transform: scale(1);
+                 transform: scale(1);
+     }
+     100% {
+         -webkit-transform: scale(0.7);
+             -ms-transform: scale(0.7);
+                 transform: scale(0.7);
+     }`;
+    const pulseLG = (0, styled_components_1.keyframes) `
+    0% {
+     -webkit-transform: scale(0.5);
+         -ms-transform: scale(0.5);
+             transform: scale(0.5);
+     }
+     70% {
+         -webkit-transform: scale(1);
+             -ms-transform: scale(1);
+                 transform: scale(1);
+     }
+     100% {
+         -webkit-transform: scale(0.5);
+             -ms-transform: scale(0.5);
+                 transform: scale(0.5);
+     }`;
+    const noAnim = (0, styled_components_1.keyframes) ``;
+    return {
+        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,
+    };
+};
+exports.allAnims = allAnims;

package/dist/cjs/components/styles/Global.d.ts

@@ -0,0 +1,6 @@
+interface ObjWrapperProps {
+    showCenterDiv?: boolean | string | number;
+    children?: any;
+}
+export declare const ObjWrapper: (props: ObjWrapperProps) => any;
+export {};

package/dist/cjs/components/styles/Global.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ObjWrapper = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const react_1 = __importDefault(require("react"));
+const ObjWrapper = (props) => {
+    const { showCenterDiv = false, children = "" } = props;
+    const Wrapper = showCenterDiv
+        ? styled_components_1.default.section `
+        width: 100%;
+        height: 100%;
+        position: relative;
+        transform-style: preserve-3d;
+        border: 1px solid #0f0;
+      `
+        : styled_components_1.default.section `
+        width: 100%;
+        height: 100%;
+        position: relative;
+        transform-style: preserve-3d;
+      `;
+    return react_1.default.createElement(Wrapper, null, children);
+};
+exports.ObjWrapper = ObjWrapper;

package/dist/cjs/components/styles/Scene.d.ts

@@ -0,0 +1,10 @@
+interface SceneStyleProps {
+    width?: number | string;
+    height?: number | string;
+    perspective?: number | string | undefined;
+    perspectiveOrigin?: string | undefined;
+    zIndex?: number | undefined;
+    children: any;
+}
+export declare const SceneStyle: (props: SceneStyleProps) => JSX.Element;
+export {};

package/dist/cjs/components/styles/Scene.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SceneStyle = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const react_1 = __importDefault(require("react"));
+const SceneStyle = (props) => {
+    const { width = 0, height = 0, perspective = 600, perspectiveOrigin = "50% 50%", zIndex = 10, children = {}, } = props;
+    const SceneStyleDiv = styled_components_1.default.div `
+    width: ${width}px;
+    height: ${height}px;
+    -webkit-perspective: ${perspective}px;
+    perspective: ${perspective}px;
+    -webkit-perspective-origin: ${perspectiveOrigin};
+    perspective-origin: ${perspectiveOrigin};
+  `;
+    return (react_1.default.createElement("div", { style: { zIndex } },
+        react_1.default.createElement(SceneStyleDiv, null, children)));
+};
+exports.SceneStyle = SceneStyle;

package/dist/cjs/index.d.ts

@@ -0,0 +1 @@
+export * from "./components";

package/dist/cjs/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components"), exports);

package/dist/esm/components/Face.js

@@ -1,3 +1,4 @@
+import React from "react";
 import styled from "styled-components";
 export default function Face(props) {
     let { depth = 10, global = { css: "", body: "" }, height = 10, face, width = 100, } = props;
@@ -5,8 +6,6 @@ export default function Face(props) {
     let transform;
     let tranz = +height / 2;
     const body = face.body ? face.body : global.body;
-    console.log("====props====" + face.name);
-    console.log(props);
     ////////////////////////////////////////////////////////////////////////////// BOTTOM
     if (face.name === "bottom") {
         tranz = +height - +depth / 2;
@@ -90,13 +89,6 @@ export default function Face(props) {
     else {
         console.log(face.name + " is not a recognized face.name");
     }
-    console.log(".....css");
-    console.log(`${face.css || global.css}
-   width: ${width}px;
-   position: absolute;
-   height: ${height}px;
-   ${transform}
-`);
     const Specs = styled.section `
     ${face.css || global.css}
     width: ${width}px;

package/package.json

@@ -1,12 +1,4 @@
 
-
-
-
-
-
-
-
-
 {
    "name": "anim-3d-obj",
    "repository": {
@@ -14,7 +6,7 @@
       "url": "https://github.com/mdnelles/anim-3d-obj-npm-publisher.git"
    },
    "homepage": "https://github.com/mdnelles/anim-3d-obj-npm-publisher.git",
-    "version": "1.1.73",
+    "version": "1.2.2",
    "description": "React library for creating 3D objects quickly.  Also these objects can be animated",
    "main": "dist/cjs/index.js",
    "module": "dist/esm/index.js",