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 |