react-ui-ox-anim

An animation package for react-ui-ox and the community

Getting Started

Add as a dependency

npm install react-ui-ox-anim

Add as a dev dependency

npm install -D react-ui-ox-anim

Components

Animation

Interfaces

interface AnimationProps extends React.HTMLAttributes<HTMLDivElement> {
  animations: ANIMATION_TYPE | ANIMATION_OBJ;
}

interface ANIMATION_OBJ_CSS extends React.CSSProperties {
  keyframe: "from" | "to" | Range_0_100;
}

interface ANIMATION_OBJ extends React.CSSProperties {
  template?: ANIMATION_TYPE | Function;
  keyframes?: ANIMATION_OBJ_CSS[];
}

interface ANIMATION_OBJS {
  [key: string]: ANIMATION_OBJ;
}

Types

| Types | values | description | | --------------------- | ----------------- | ----------------------------- | | ANIMATION_TYPE | "wiggle", "circle", "poke", "grow", "swirve" | The kind of animation to play |

Objects

| Object | type | description | | --------------------- | ------------------------- | ------------------------- | | ANIMATIONS | ANIMATION_OBJS | Contains default ANIMATION_OBJs that you can pass in the animations prop |

Functions

| Types | parameters | return type | description | | --------------------- | ----------------- | ------ | ----------------------------- | | createPercentAnim | css1 : React.CSSProperties, css2 : React.CSSProperties | ANIMATION_OBJ_CSS[] | Create a from to animation out of 2 CSS states | | createPercentAnim | perc : ({ keyframe: Range_0_100 } \| React.CSSProperties)[] | ANIMATION_OBJ_CSS[] | Create an animation from defined keyframes |

Transition

Interfaces

interface TransitionProps {
  animations: TRANSITION_TYPE | ANIMATION_OBJ;
}

interface TRANSITION_OBJS {
  [key: string]: ANIMATION_OBJ;
}

Types

| Types | values | description | | --------------------- | ----------------- | ----------------------------- | | TRANSITION_TYPE | "enterTop", "enterBottom", "enterLeft", "enterRight", "fadeInTop", "fadeInBottom", "fadeInLeft", "fadeInRight", "curveBottomFromTopLeft", "curveRightFromTopLeft", "curveBottomFromTopRight", "curveLeftFromTopRight", "curveRightFromBottomLeft", "curveTopFromBottomLeft", "curveLeftFromBottomRight", "curveTopFromBottomRight", "fadeInCurveBottomFromTopLeft", "fadeInCurveRightFromTopLeft", "fadeInCurveBottomFromTopRight", "fadeInCurveLeftFromTopRight", "fadeInCurveRightFromBottomLeft", "fadeInCurveTopFromBottomLeft", "fadeInCurveLeftFromBottomRight", "fadeInCurveTopFromBottomRight" | The kind of transition to play |

Objects

| Object | type | description | | --------------------- | ------------------------- | ------------------------- | | TRANSITIONS | TRANSITION_OBJS | Contains default TRANSITION_OBJSs that you can pass in the animations prop |