react-ui-ox-anim

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