# react-ui-ox-anim > An animation package for react-ui-ox and the community Latest version **1.0.0** (published 2021-11-03) · MIT license · 0 weekly downloads ## Install ```sh npm install react-ui-ox-anim pnpm add react-ui-ox-anim yarn add react-ui-ox-anim bun add react-ui-ox-anim ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.0 | | Published | 2021-11-03 | | First published | 2021-11-03 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 26 | | Unpacked size | 344 KB | | Known vulnerabilities | 0 (+6 in 1 direct dependencies) | | Install scripts | no | | GitHub stars | 1 | | Author | Alan Blanchet | | Maintainers | alanox | | Keywords | react, ui, ox, animation, anim | ## Links - npm: https://www.npmjs.com/package/react-ui-ox-anim - Repository: https://github.com/Generalizers/react-ui-ox-anim - Homepage: https://github.com/Generalizers/react-ui-ox-anim#readme - Issues: https://github.com/Generalizers/react-ui-ox-anim/issues - npm.io page: https://npm.io/package/react-ui-ox-anim ## Dependencies (26) - [jquery](https://npm.io/package/jquery.md) ^3.6.0 - [webpack](https://npm.io/package/webpack.md) ^5.24.3 - [jqueryui](https://npm.io/package/jqueryui.md) ^1.11.1 - [ts-loader](https://npm.io/package/ts-loader.md) ^9.2.5 - [@babel/core](https://npm.io/package/@babel/core.md) ^7.13.8 - [webpack-cli](https://npm.io/package/webpack-cli.md) ^4.5.0 - [@types/react](https://npm.io/package/@types/react.md) ^17.0.3 - [babel-loader](https://npm.io/package/babel-loader.md) ^8.2.2 - [style-loader](https://npm.io/package/style-loader.md) ^2.0.0 - [@types/jquery](https://npm.io/package/@types/jquery.md) ^3.5.5 - [webpack-merge](https://npm.io/package/webpack-merge.md) ^5.8.0 - [@types/jqueryui](https://npm.io/package/@types/jqueryui.md) ^1.12.15 - [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^17.0.1 - [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.13.9 - [styled-components](https://npm.io/package/styled-components.md) ^5.3.0 - [@types/react-redux](https://npm.io/package/@types/react-redux.md) ^7.1.16 - [webpack-dev-server](https://npm.io/package/webpack-dev-server.md) ^4.1.0 - [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) ^7.12.13 - [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) ^5.2.0 - [@babel/preset-typescript](https://npm.io/package/@babel/preset-typescript.md) ^7.13.0 - [@types/styled-components](https://npm.io/package/@types/styled-components.md) ^5.1.9 - [awesome-typescript-loader](https://npm.io/package/awesome-typescript-loader.md) ^5.2.1 - [tsconfig-paths-webpack-plugin](https://npm.io/package/tsconfig-paths-webpack-plugin.md) ^3.5.1 - [@babel/plugin-transform-typescript](https://npm.io/package/@babel/plugin-transform-typescript.md) ^7.13.0 - [babel-plugin-transform-class-properties](https://npm.io/package/babel-plugin-transform-class-properties.md) ^6.24.1 - [@babel/plugin-proposal-object-rest-spread](https://npm.io/package/@babel/plugin-proposal-object-rest-spread.md) ^7.13.8 ## Alternatives - [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads - [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads - [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads - [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads - [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads ## Recent versions - 1.0.0 (latest) — 2021-11-03 ## README ![npm](https://img.shields.io/npm/v/react-ui-ox-anim?label=version) ![Libraries.io dependency status for specific release](https://img.shields.io/librariesio/release/npm/react-ui-ox-anim/1.0.43) ![GitHub last commit](https://img.shields.io/github/last-commit/Generalizers/react-ui-ox-anim) [![GitHub issues](https://img.shields.io/github/issues/Generalizers/react-ui-ox-anim)](https://github.com/Generalizers/react-ui-ox-anim/issues) [![GitHub license](https://img.shields.io/github/license/Generalizers/react-ui-ox-anim)](https://github.com/Generalizers/react-ui-ox-anim/blob/master/LICENSE) # react-ui-ox-anim An animation package for react-ui-ox and the community # Getting Started Add as a dependency ```bash npm install react-ui-ox-anim ``` Add as a dev dependency ```bash npm install -D react-ui-ox-anim ``` # Components ## Animation ### Interfaces ```typescript interface AnimationProps extends React.HTMLAttributes { animations: ANIMATION_TYPE | ANIMATION_OBJ; } ``` ```typescript interface ANIMATION_OBJ_CSS extends React.CSSProperties { keyframe: "from" | "to" | Range_0_100; } ``` ```typescript interface ANIMATION_OBJ extends React.CSSProperties { template?: ANIMATION_TYPE | Function; keyframes?: ANIMATION_OBJ_CSS[]; } ``` ```typescript 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_OBJ`s 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 ```typescript interface TransitionProps { animations: TRANSITION_TYPE | ANIMATION_OBJ; } ``` ```typescript 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_OBJS`s that you can pass in the `animations` prop | --- _Source: https://npm.io/package/react-ui-ox-anim · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._