React-ui-ox-anim NPM

npm Libraries.io dependency status for specific release GitHub last commit

react-ui-ox-anim

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

Add as a dependency

npm install react-ui-ox-anim

Add as a dev dependency

npm install -D react-ui-ox-anim

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	values	description
ANIMATION_TYPE	`"wiggle"`, `"circle"`, `"poke"`, `"grow"`, `"swirve"`	The kind of animation to play

Object	type	description
ANIMATIONS	`ANIMATION_OBJS`	Contains default `ANIMATION_OBJ`s that you can pass in the `animations` prop

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

interface TransitionProps {
  animations: TRANSITION_TYPE | ANIMATION_OBJ;
}

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

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

Object	type	description
TRANSITIONS	`TRANSITION_OBJS`	Contains default `TRANSITION_OBJS`s that you can pass in the `animations` prop