anim-3d-obj 1.1.21 → 1.1.22

package/src/lib/components/Card.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { AnimWrap } from "./styles/AnimWrap";
+import { SceneStyle } from "./styles/Scene";
+import { ObjProps } from "./Face/face";
+import Face from "./Face";
+import { ObjWrapper } from "./styles/Global";
+
+export const Card = (props: ObjProps): any => {
+   let {
+      anim1Specs,
+      anim2Specs,
+      width = 5,
+      height = 5,
+      faces,
+      global = {},
+      custom = {},
+      tranz = (+height / 2) | 0,
+      perspective,
+      perspectiveOrigin,
+      zIndex,
+   } = props;
+
+   const buildFace = (faceType: any): any => {
+      return (
+         <Face
+            width={width}
+            height={height}
+            depth={0.1}
+            faceType={faceType}
+            id={faceType}
+            tranz={tranz}
+            global={global}
+            custom={custom}
+         />
+      );
+   };
+
+   return (
+      <SceneStyle
+         width={width}
+         height={height}
+         perspective={perspective}
+         perspectiveOrigin={perspectiveOrigin}
+         zIndex={zIndex}
+      >
+         <AnimWrap animSpecs={anim1Specs}>
+            <AnimWrap animSpecs={anim2Specs}>
+               <ObjWrapper>
+                  {!!faces && !!faces.front ? buildFace("front") : null}
+                  {!!faces && !!faces.back ? buildFace("back") : null}
+               </ObjWrapper>
+            </AnimWrap>
+         </AnimWrap>
+      </SceneStyle>
+   );
+};

package/src/lib/components/Cuboid.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { AnimWrap } from "./styles/AnimWrap";
+import { SceneStyle } from "./styles/Scene";
+import { ObjProps } from "./Face/face";
+import Face from "./Face";
+import { ObjWrapper } from "./styles/Global";
+
+export const Cuboid = (props: ObjProps): any => {
+   let {
+      anim1Specs,
+      anim2Specs,
+      width = 5,
+      height = 5,
+      depth = 5,
+      faces,
+      global = {},
+      custom = {},
+      tranz = (+height / 2) | 0,
+      perspective,
+      perspectiveOrigin,
+      zIndex,
+   } = props;
+
+   const buildFace = (faceType: any): any => {
+      return (
+         <Face
+            width={width}
+            height={height}
+            depth={depth}
+            faceType={faceType}
+            id={faceType}
+            tranz={tranz}
+            global={global}
+            custom={custom}
+         />
+      );
+   };
+
+   return (
+      <SceneStyle
+         width={width}
+         height={height}
+         perspective={perspective}
+         perspectiveOrigin={perspectiveOrigin}
+         zIndex={zIndex}
+      >
+         <AnimWrap animSpecs={anim1Specs}>
+            <AnimWrap animSpecs={anim2Specs}>
+               <ObjWrapper>
+                  {!!faces && !!faces.front ? buildFace("front") : null}
+                  {!!faces && !!faces.right ? buildFace("right") : null}
+                  {!!faces && !!faces.back ? buildFace("back") : null}
+                  {!!faces && !!faces.left ? buildFace("left") : null}
+                  {!!faces && !!faces.top ? buildFace("top") : null}
+                  {!!faces && !!faces.bottom ? buildFace("bottom") : null}
+               </ObjWrapper>
+            </AnimWrap>
+         </AnimWrap>
+      </SceneStyle>
+   );
+};

package/src/lib/components/Face/face.d.ts

@@ -0,0 +1,39 @@
+export interface FaceProps {
+   children?: any;
+   depth?: number | any;
+   faceType?: any;
+   custom?: any;
+   global?: any;
+   height?: number | string;
+   id?: string | number | boolean;
+   styles?: object | any;
+   tranz: any;
+   width?: number | string;
+}
+
+export interface ObjProps {
+   anim1Specs?: object | undefined;
+   anim2Specs?: object | undefined;
+   children: any;
+   depth?: number;
+   global?: { border?: string; bgc?: string; opac?: number | string } | any;
+   faces?:
+      | {
+           front: boolean;
+           back: boolean;
+           left: boolean;
+           right: boolean;
+           top: boolean;
+           bottom: boolean;
+        }
+      | undefined;
+
+   height?: number | string;
+   custom?: object | string | undefined;
+   perspective?: string | number | undefined;
+   perspectiveOrigin?: string | undefined;
+   tranz?: number | undefined;
+   txt?: string | any;
+   width?: number;
+   zIndex?: number | undefined;
+}

package/src/lib/components/Face/index.tsx

@@ -0,0 +1,85 @@
+import styled from "styled-components";
+import React from "react";
+import { FaceProps } from "./face";
+
+const Face = (props: FaceProps): JSX.Element => {
+   let {
+      depth = 10,
+      faceType,
+      global = {},
+      height = 10,
+      custom = false,
+      tranz = 80,
+      width = 100,
+   } = props;
+
+   let transform;
+   let styles =
+      !!custom[faceType] && !!custom[faceType].css
+         ? custom[faceType].css
+         : global.css;
+   const body =
+      !!custom[faceType] && !!custom[faceType].body
+         ? custom[faceType].body
+         : global.body;
+   if (faceType === "bottom") {
+      tranz = +height - +depth / 2;
+      height = +depth;
+      transform = `transform: rotateX(-90deg) translateZ(${tranz}px);`;
+      //styles = !!custom["top"] ? custom : global;
+   } else if (faceType === "top") {
+      height = +depth;
+      if (!!depth) tranz = +depth / 2;
+      transform = `transform: rotateX(90deg) translateZ(${tranz}px);`;
+   } else if (faceType === "front") {
+      if (!!depth) tranz = +depth / 2;
+      transform = `transform: rotateY(0deg) translateZ(${tranz}px);`;
+   } else if (faceType === "back") {
+      if (!!depth) tranz = +depth / 2;
+      transform = `transform: rotateY(180deg) translateZ(${tranz}px);`;
+   } else if (faceType === "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 (faceType === "topr") {
+      height = +depth;
+      if (!!depth) tranz = +depth / 2;
+      let offset = depth / 2;
+      transform = `transform: rotateX(90deg) translateZ(${tranz}px );  `;
+   } else {
+      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);`;
+   }
+
+   const BackFlip: any = styled.section``;
+
+   const Specs: any = styled.section`
+      ${styles}
+      width: ${width}px;
+      position: absolute;
+      height: ${height}px;
+      ${transform};
+   `;
+
+   return <Specs>{body}</Specs>;
+};
+
+export default Face;

package/src/lib/components/Ribbon.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { AnimWrap } from "./styles/AnimWrap";
+import { SceneStyle } from "./styles/Scene";
+import { ObjProps } from "./Face/face";
+import Face from "./Face";
+import { ObjWrapper } from "./styles/Global";
+
+export const Ribbon = (props: ObjProps): any => {
+   let {
+      anim1Specs,
+      anim2Specs,
+      width = 5,
+      height = 5,
+      depth = 5,
+      faces,
+      global = {},
+      custom = {},
+      tranz = (+height / 2) | 0,
+      perspective,
+      perspectiveOrigin,
+      zIndex,
+   } = props;
+
+   const buildFace = (faceType: any): any => {
+      return (
+         <Face
+            width={width}
+            height={height}
+            depth={depth}
+            faceType={faceType}
+            id={faceType}
+            tranz={tranz}
+            global={global}
+            custom={custom}
+         />
+      );
+   };
+
+   return (
+      <SceneStyle
+         width={width}
+         height={height}
+         perspective={perspective}
+         perspectiveOrigin={perspectiveOrigin}
+         zIndex={zIndex}
+      >
+         <AnimWrap animSpecs={anim1Specs}>
+            <AnimWrap animSpecs={anim2Specs}>
+               <ObjWrapper>
+                  {!!faces && !!faces.bottom ? buildFace("bottom") : null}
+                  {!!faces && !!faces.back ? buildFace("back") : null}
+                  {!!faces && !!faces.top ? buildFace("topr") : null}
+               </ObjWrapper>
+            </AnimWrap>
+         </AnimWrap>
+      </SceneStyle>
+   );
+};

package/src/lib/components/styles/Anim.d.ts

@@ -0,0 +1,16 @@
+export interface AnimStylesProps {
+   children?: any;
+   animSpecs?: any;
+}
+export interface AnimSpecsProps {
+   border?: string | undefined;
+   degreesHi?: number | undefined;
+   degreesLow?: number | undefined;
+   delay: any;
+   direction?: string | undefined;
+   duration?: number | string | undefined;
+   fillMode?: string | undefined;
+   iterationCount?: number | string | undefined;
+   name?: string | undefined;
+   timing?: string | undefined;
+}

package/src/lib/components/styles/AnimWrap.tsx

@@ -0,0 +1,85 @@
+import styled from "styled-components";
+import React from "react";
+import { AnimStylesProps } from "./Anim";
+import { allAnims } from "./Anims";
+
+export const AnimWrap = (props: AnimStylesProps) => {
+   const { children, animSpecs } = props;
+   const AS: any = animSpecs;
+
+   const {
+      X360,
+      Y360,
+      fadeInkf,
+      wobY,
+      wobX,
+      fwdx018,
+      fwdx1836,
+      fwdx09,
+      fwdx918,
+      fwdx1827,
+      fwdx2736,
+      fwdy018,
+      fwdy1836,
+      fwdy09,
+      fwdy918,
+      fwdy1827,
+      fwdy2736,
+      floatX,
+      floatShadow,
+      pulseSM,
+      pulseMD,
+      pulseLG,
+      noAnim,
+   } = allAnims({ degreesHi: AS.degreesHi, degreesLow: AS.degreesLow });
+
+   let theAnim: any = "noAnim";
+   // need to iterate through all animation posibilities and not use eval() to satisfy TS
+   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 theAnim = noAnim;
+
+   const AnimWrapDiv: any = styled.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 <AnimWrapDiv>{children}</AnimWrapDiv>;
+};

package/{dist/cjs/components/styles/Anims.js → src/lib/components/styles/Anims.ts}

@@ -1,10 +1,14 @@
-"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 X360 = (0, styled_components_1.keyframes) `
+import { keyframes } from "styled-components";
+
+interface AllAnimsProps {
+   degreesLow?: number;
+   degreesHi?: number;
+}
+
+export const allAnims = (props: AllAnimsProps) => {
+   const { degreesLow = 0, degreesHi = 0 } = props;
+
+   const X360 = keyframes`
    from {
       -webkit-transform: rotateX(360deg);
       transform: rotateX(360deg);
@@ -14,8 +18,9 @@ const allAnims = (props) => {
       transform: rotateX(0deg);
    }
 }`;
-    //////// Y360
-    const Y360 = (0, styled_components_1.keyframes) `
+
+   //////// Y360
+   const Y360 = keyframes`
     from {
         -webkit-transform: rotateY(360deg);
         transform: rotateY(360deg);
@@ -24,14 +29,16 @@ const allAnims = (props) => {
         -webkit-transform: rotateY(0deg);
         transform: rotateY(0deg);
     }`;
-    const fadeInkf = (0, styled_components_1.keyframes) `
+
+   const fadeInkf = keyframes`
     from {
         opacity: 0;
     }
     to {
         opacity: 1;
     }`;
-    const wobY = (0, styled_components_1.keyframes) `
+
+   const wobY = keyframes`
     0% {
         -webkit-transform: rotateY(${degreesLow}deg);
         transform: rotateY(${degreesLow}deg);
@@ -44,7 +51,8 @@ const allAnims = (props) => {
         -webkit-transform: rotateY(${degreesLow}deg);
         transform: rotateY(${degreesLow}deg);
     }`;
-    const wobX = (0, styled_components_1.keyframes) `
+
+   const wobX = keyframes`
     0% {
         -webkit-transform: rotateX(${degreesLow}deg);
         transform: rotateX(${degreesLow}deg);
@@ -57,8 +65,8 @@ const allAnims = (props) => {
         -webkit-transform: rotateX(${degreesLow}deg);
         transform: rotateX(${degreesLow}deg);
     }`;
-    /* ============================== x-axis 0-180 >180 - 360 */
-    const fwdx018 = (0, styled_components_1.keyframes) `
+   /* ============================== x-axis 0-180 >180 - 360 */
+   const fwdx018 = keyframes`
     from {
         -webkit-transform: rotateX(360deg);
         transform: rotateX(360deg);
@@ -67,7 +75,7 @@ const allAnims = (props) => {
         -webkit-transform: rotateX(180deg);
         transform: rotateX(180deg);
     }`;
-    const fwdx1836 = (0, styled_components_1.keyframes) `
+   const fwdx1836 = keyframes`
     from {
         -webkit-transform: rotateX(180deg);
         transform: rotateX(180deg);
@@ -76,8 +84,8 @@ const allAnims = (props) => {
         -webkit-transform: rotateX(0deg);
         transform: rotateX(0deg);
     }`;
-    /* ============================= x-axis 0-90, 90-180, 180-270, 270-360 */
-    const fwdx09 = (0, styled_components_1.keyframes) `
+   /* ============================= x-axis 0-90, 90-180, 180-270, 270-360 */
+   const fwdx09 = keyframes`
     from {
        -webkit-transform: rotateX(360deg);
        transform: rotateX(360deg);
@@ -86,7 +94,7 @@ const allAnims = (props) => {
        -webkit-transform: rotateX(90deg);
        transform: rotateX(90deg);
     }`;
-    const fwdx918 = (0, styled_components_1.keyframes) `
+   const fwdx918 = keyframes`
     from {
         -webkit-transform: rotateX(-90deg);
         transform: rotateX(-90deg);
@@ -95,7 +103,7 @@ const allAnims = (props) => {
         -webkit-transform: rotateX(-180deg);
         transform: rotateX(-180deg);
     }`;
-    const fwdx1827 = (0, styled_components_1.keyframes) `
+   const fwdx1827 = keyframes`
     from {
         -webkit-transform: rotateX(-180deg);
         transform: rotateX(-180deg);
@@ -104,7 +112,7 @@ const allAnims = (props) => {
         -webkit-transform: rotateX(-270deg);
         transform: rotateX(-270deg);
     }`;
-    const fwdx2736 = (0, styled_components_1.keyframes) `
+   const fwdx2736 = keyframes`
     from {
         -webkit-transform: rotateX(-270deg);
         transform: rotateX(-270deg);
@@ -113,8 +121,9 @@ const allAnims = (props) => {
         -webkit-transform: rotateX(-360deg);
         transform: rotateX(-360deg);
     }`;
-    /* ============================== y-axis 0-180 >180 - 360 */
-    const fwdy018 = (0, styled_components_1.keyframes) `
+
+   /* ============================== y-axis 0-180 >180 - 360 */
+   const fwdy018 = keyframes`
    from {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
@@ -123,7 +132,7 @@ const allAnims = (props) => {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }`;
-    const fwdy1836 = (0, styled_components_1.keyframes) `
+   const fwdy1836 = keyframes`
    from {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
@@ -132,8 +141,9 @@ const allAnims = (props) => {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }`;
-    /* ============================= y-axis 0-90, 90-180, 180-270, 270-360 */
-    const fwdy09 = (0, styled_components_1.keyframes) `
+
+   /* ============================= y-axis 0-90, 90-180, 180-270, 270-360 */
+   const fwdy09 = keyframes`
    from {
       -webkit-transform: rotateY(360deg);
       transform: rotateY(360deg);
@@ -142,7 +152,7 @@ const allAnims = (props) => {
       -webkit-transform: rotateY(90deg);
       transform: rotateY(90deg);
    }`;
-    const fwdy918 = (0, styled_components_1.keyframes) `
+   const fwdy918 = keyframes`
    from {
        -webkit-transform: rotateY(-90deg);
        transform: rotateY(-90deg);
@@ -151,7 +161,7 @@ const allAnims = (props) => {
        -webkit-transform: rotateY(-180deg);
        transform: rotateY(-180deg);
    }`;
-    const fwdy1827 = (0, styled_components_1.keyframes) `
+   const fwdy1827 = keyframes`
    from {
        -webkit-transform: rotateY(-180deg);
        transform: rotateY(-180deg);
@@ -160,7 +170,7 @@ const allAnims = (props) => {
        -webkit-transform: rotateY(-270deg);
        transform: rotateY(-270deg);
    }`;
-    const fwdy2736 = (0, styled_components_1.keyframes) `
+   const fwdy2736 = keyframes`
    from {
        -webkit-transform: rotateY(-270deg);
        transform: rotateY(-270deg);
@@ -169,12 +179,14 @@ const allAnims = (props) => {
        -webkit-transform: rotateY(-360deg);
        transform: rotateY(-360deg);
    }`;
-    /* ============================= floating */
-    const floatX = (0, styled_components_1.keyframes) `
+
+   /* ============================= floating */
+   const floatX = 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) `
+
+   const floatShadow = 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);
@@ -196,7 +208,8 @@ const allAnims = (props) => {
                 -ms-transform: translateY(0px);
                     transform: translateY(0px);
         }`;
-    const pulseSM = (0, styled_components_1.keyframes) `
+
+   const pulseSM = keyframes`
    0% {
     -webkit-transform: scale(0.9);
         -ms-transform: scale(0.9);
@@ -212,7 +225,8 @@ const allAnims = (props) => {
             -ms-transform: scale(0.9);
                 transform: scale(0.9);
     }`;
-    const pulseMD = (0, styled_components_1.keyframes) `
+
+   const pulseMD = keyframes`
     0% {
      -webkit-transform: scale(0.7);
          -ms-transform: scale(0.7);
@@ -228,7 +242,8 @@ const allAnims = (props) => {
              -ms-transform: scale(0.7);
                  transform: scale(0.7);
      }`;
-    const pulseLG = (0, styled_components_1.keyframes) `
+
+   const pulseLG = keyframes`
     0% {
      -webkit-transform: scale(0.5);
          -ms-transform: scale(0.5);
@@ -244,32 +259,32 @@ const allAnims = (props) => {
              -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,
-        noAnim
-    };
+
+   const noAnim = keyframes``;
+
+   return {
+      X360,
+      Y360,
+      fadeInkf,
+      wobY,
+      wobX,
+      fwdx018,
+      fwdx1836,
+      fwdx09,
+      fwdx918,
+      fwdx1827,
+      fwdx2736,
+      fwdy018,
+      fwdy1836,
+      fwdy09,
+      fwdy918,
+      fwdy1827,
+      fwdy2736,
+      floatX,
+      floatShadow,
+      pulseSM,
+      pulseMD,
+      pulseLG,
+      noAnim,
+   };
 };
-exports.allAnims = allAnims;
-//# sourceMappingURL=Anims.js.map

package/src/lib/components/styles/Global.ts

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+export const ObjWrapper = styled.div`
+   width: 100%;
+   height: 100%;
+   position: relative;
+   transform-style: preserve-3d;
+`;