anim-3d-obj
TypeScript icon, indicating that this package has built-in type declarations

1.2.1 • Public • Published

React Typescript Cuboid Builder

This project allows a user to create Cuboids of any size simply by entering a set of parameters.
The program does the leg work with regard to calculating translationZ depth and config on the fly.

Examples

** ANIMATIONS

  • fadeInkf: fade object in from 0 to 1 Opacity: demo
  • floatX: float object so is not stationary: demo
  • floatShadow: float object + add shadow: demo
  • pulseSM: pulse object Small: demo
  • pulseMD: pulse object Medium: demo
  • pulseLG: pulse object Large: demo
  • swing: Swing component: demo
  • swingDecay: Swing component with decay: demo
  • noAnim: no animation place holder

X-AXIS Animations

  • X360: rotate 360 degrees on the x-axis: demo
  • wobX: wobble on x-axis (degreesHi <-> degreesLow): demo
  • fwdx018: spin object on x-axis from 0 degrees to 180 degrees: demo
  • fwdx1836: spin object on x-axis from 180 degrees to 360 degrees: demo
  • fwdx09: spin object on x-axis from 0 degrees to 90 degrees: demo
  • fwdx918: spin object on x-axis from 90 degrees to 180 degrees: demo
  • fwdx1827: spin object on x-axis from 180 degrees to 270 degrees: demo
  • fwdx2736: spin object on x-axis from 270 degrees to 360 degrees: demo

Y-AXIS Animations

  • Y360: rotate 360 degrees on the y-axis: demo
  • wobY: wobble on y-axis (degreesHi <-> degreesLow): demo
  • fwdy018: spin object on y-axis from 0 degrees to 180 degrees: demo
  • fwdy1836: spin object on y-axis from 180 degrees to 360 degrees: demo
  • fwdy09: spin object on y-axis from 0 degrees to 90 degrees: demo
  • fwdy918: spin object on y-axis from 90 degrees to 180 degrees: demo
  • fwdy1827: spin object on y-axis from 180 degrees to 270 degrees: demo
  • fwdy2736: spin object on y-axis from 270 degrees to 360 degrees: demo

Config

Animations:

Animations are optional. Either or both of anim1 or anim2 can be applied to the component. Animations are applied to 2 wrapping divs respectively.

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
};

Faces:

This is an array of objects containing the face used for a given component

   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)`,
      },
      {
         name: "right",
         body: "RIGHT",
         css: `background:rgba(220,220,220,.5); 
               border:1px solid #ddd`,
      },
   ];

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.

   interface GlobalType {
      css?: string;
      body?: string;
   }
   const global: GlobalType = {
      body: "BODY FOR FACE WHICH DOES NOT CONTAIN BODY",
      css: 'color:red'
   };

all sides

Package Sidebar

Install

npm i anim-3d-obj

Weekly Downloads

2

Version

1.2.1

License

MIT

Unpacked Size

52.7 kB

Total Files

34

Last publish

Collaborators

  • mxnelles