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

How to use

Use existing templates :

animations autocomplete

Create your own animation object :

const myAnimationObj: ANIMATION_OBJ = {
  keyframes: [
    {
      keyframe: 0,
      transform: 'scale(120%)'
    },
    {
      keyframe: 44,
      transform: 'scale(100%)'
    },
    {
      keyframe: 100,
      transform: 'scale(120%)'
    }
  ]
};

<Animation animations={myAnimationObj}>Animate me</Animation>

Result :

animations autocomplete

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

GitHub

View Github