Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dipeshrai123/react-ui-animate
Create smooth animations and interactive gestures in React applications effortlessly :computer:
https://github.com/dipeshrai123/react-ui-animate
animation gesture interaction
Last synced: 8 days ago
JSON representation
Create smooth animations and interactive gestures in React applications effortlessly :computer:
- Host: GitHub
- URL: https://github.com/dipeshrai123/react-ui-animate
- Owner: dipeshrai123
- License: mit
- Created: 2020-12-29T09:05:57.000Z (about 4 years ago)
- Default Branch: next
- Last Pushed: 2024-09-29T17:24:44.000Z (4 months ago)
- Last Synced: 2025-01-15T23:50:43.869Z (15 days ago)
- Topics: animation, gesture, interaction
- Language: TypeScript
- Homepage: https://react-ui-animate.js.org/
- Size: 1.81 MB
- Stars: 42
- Watchers: 2
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# React UI Animate
[![npm version](https://badge.fury.io/js/react-ui-animate.svg)](https://badge.fury.io/js/react-ui-animate)
> Create smooth animations and interactive gestures in React applications effortlessly.
### Install
You can install react-ui-animate via `npm` or `yarn`:
```sh
npm i react-ui-animate
``````sh
yarn add react-ui-animate
```### Getting Started
The `react-ui-animate` library provides a straightforward way to add animations and gestures to your React components. Here’s how you can get started quickly:
```javascript
import { animate, useValue } from 'react-ui-animate';export default function () {
const opacity = useValue(0); // Initializereturn (
<>
ANIMATED
{
opacity.value = 1 // Update
}}
>
Animate Me
>
);
}
```In this example, clicking the `Animate Me` button changes the opacity from 0 to 1.
---
### Implementation Steps
#### 1. Initialize
The `useValue()` hook is central to creating animations. It initializes an animated value and allows you to seamlessly update it to create dynamic effects.
```javascript
const opacity = useValue(0); // Initialize a animation value 0
```#### 2. Apply
`animate.div` is a special component designed to work with `useValue()`. It simplifies animating elements by directly using animated values.
```jsx
import { useValue, animate } from 'react-ui-animate'const width = useValue(100); // Start with a width of 100
;
```#### 3. Update
To update the value simply assign the initialized animated node with a value.
```jsx
import { useValue, withSpring } from 'react-ui-animate';const width = useValue(100);
{
// Update
width.value = withSpring(400);
}}
>
Update```
In this example, `withSpring` runs spring animation when updating the value.
---
#### `interpolate`
The `interpolate()` function is useful for mapping values from one range to another, enabling more complex animations.
```javascript
import { useValue, animate, interpolate } from 'react-ui-animate';const width = useValue(100);
;
```In this example, as the width changes from 100 to 200, the background color smoothly transitions from red to blue.
#### Modifiers
You can dynamically modify animation configurations by assigning values to an animated value using various animation functions.
To apply a spring animation and update the value to `10`:
```jsx
x.value = withSpring(10);
```To apply a timing animation with a duration of 5000 milliseconds:
```jsx
x.value = withTiming(10, { duration: 5000 });
```To create sequential transitions using the `withSequence` function with dynamic modifiers like `withSpring` and `withTiming`:
```jsx
x.value = withSequence([withSpring(50), withTiming(100), withEase(200)]);
```#### `useMount()`
The `useMount()` hook facilitates managing the mounting and unmounting of a component with animations.
```jsx
import { useMount } from 'react-ui-animate';export default function App() {
const [visible, setVisible] = useState(false);const open = useMount(visible);
return open((animation, mounted) => mounted && );
}
```In this example,
1. A state variable `visible` determines whether the component is visible.
2. The `useMount` hook takes `visible` as an argument and provides animation states for mounting and unmounting.
3. The `open` function, returned by `useMount`, is used to conditionally render `animate.div` based on the `mounted` boolean and apply the transition animation.---
### Gestures
The `react-ui-animate` library also provides several hooks for handling different types of gestures:
1. `useDrag`: Handles drag gestures on elements.
2. `useMouseMove`: Handles mouse movements.
3. `useScroll`: Handles scrolling of the document.
4. `useWheel`: Handles wheel rotation gestures.
5. `useGesture`: Handles combinations of various gestures.**Example**: `useDrag`
Here’s an example of using the useDrag hook to enable drag gestures:
```jsx
import { useValue, animate, useDrag, withSpring } from 'react-ui-animate';export const Draggable = () => {
const translateX = useValue(0);const bind = useDrag(function ({ down, movementX }) {
translateX.value = down ? movementX : withSpring(0);
});return (
);
};
```In this example, the blue block can be dragged horizontally by clicking and dragging.
## Documentation
For detailed documentation and examples, visit the official [react-ui-animate documentation](http://react-ui-animate.js.org/).
## License
This library is licensed under the MIT License.