Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/behnammodi/reactima
Animation Library for React Projects
https://github.com/behnammodi/reactima
animation react
Last synced: about 1 month ago
JSON representation
Animation Library for React Projects
- Host: GitHub
- URL: https://github.com/behnammodi/reactima
- Owner: behnammodi
- License: mit
- Created: 2023-06-04T18:19:57.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-06-25T05:16:47.000Z (over 1 year ago)
- Last Synced: 2024-05-22T15:33:02.369Z (6 months ago)
- Topics: animation, react
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/reactima
- Size: 5.02 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
## Reactima: Animation Library for React Projects
Here are some basic example showcasing the usage of `reactima` in a React project:
## The basic example:
https://codesandbox.io/p/sandbox/yinnjk
In this example, we have implemented an animation where a card component moves from the left side to the right side. The animation begins with the card's opacity at 0 and gradually increases it to 1.
```jsx
```
The card component remains unchanged in this example and only requires `forwardRed` to function properly.
## Infinity animation example:
https://codesandbox.io/p/sandbox/b9njfx
In this example, we have implemented an animation where a card component continuously rotates. We achieve this effect by using the `iterations` prop with a value of `Infinity`.
```jsx
```
## Animation composition exmple:
https://codesandbox.io/p/sandbox/0rm9xk
Here is an example showcasing the composition of multiple animations with different configurations. In this example, we combine multiple animations to create a complex effect. By combining multiple animations in this way, you can create more intricate and dynamic effects
```jsx
```
## Interactively Controlled Animation example:
https://codesandbox.io/p/sandbox/o1mplp
Here is an example that demonstrates how to animate a card based on a mount and unmount interaction. In this example, the card animation is controlled by a `show` flag that determines whether the card should be displayed or hidden. When the `show` flag is `true`, the card is mounted and animated using the specified keyframes.
```jsx
const [show, setShow] = useState(false);
{show && }
```
Inside the Animation component, fill is set to "both" to maintain the final state of the animation. The direction property is dynamically controlled by the show flag. When show is true, the animation plays in the normal direction.
## Keyframes
Keyframes can be defined as an object where each property represents a CSS property and its corresponding values. For example:
```js
keyframes={{
opacity: [0, 1],
transform: ['translateX(0px)', 'translateX(500px)']
]}
```
Multiple values can also be passed for a property to create more complex animations. For instance:
```js
keyframes={{
opacity: [0, 1], // offset: 0, 1
transform: ['translateX(0px)', 'translateX(20px)','translateX(500px)'], // offset: 0, 0.5, 1
]}
```
For more details, please refer to the MDN documentation on keyframe formats:
https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats
## How to use it:
Install:
```bash
npm install reactima
# or
yard add reactima
```
Import:
```js
import Animation from 'reactima';
```
## Other exmaples:
Reactima with styled-components:
https://codesandbox.io/p/sandbox/b5dr16
## Size:
Less than 1kB:
https://bundlephobia.com/package/reactima