Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cirolee/ease-motion
The high-performance extension of Web Animation API for React Hooks
https://github.com/cirolee/ease-motion
animation ease-motion hooks motion react web-animation-api
Last synced: 27 days ago
JSON representation
The high-performance extension of Web Animation API for React Hooks
- Host: GitHub
- URL: https://github.com/cirolee/ease-motion
- Owner: CiroLee
- License: mit
- Created: 2024-06-26T04:15:05.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-09-27T09:22:35.000Z (about 1 month ago)
- Last Synced: 2024-10-10T10:43:13.296Z (27 days ago)
- Topics: animation, ease-motion, hooks, motion, react, web-animation-api
- Language: TypeScript
- Homepage: https://ease-motion.vercel.app
- Size: 690 KB
- Stars: 10
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
ease-motion
The high-performance extension of Web Animation API for React Hooks
  
# Install
```bash
npm install ease-motion
```
# Usage
## useMotion
the preset motions
```ts
// App.tsx
import { useMotion } from 'ease-motion';
export default function App() {
const [ ref, motion ] = useMotion()
return (
ease-motion
motion('swing')}>play
)
}
```
## useAnimate
basic wrap of [Web Animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API)
```ts
import { useAnimate} from 'ease-motion;'
export default function App() {
const [ ref, animate ] = useAnimate();
return (
{
animate(
{
transform: ['translateX(0)', 'translateX(100px)'],
borderRadius: ['8px', '50%'],
backgroundColor: ['rgb(59 130 246)', 'rgb(246 154 59)']
},
{
duration: 800,
easing: 'ease-in-out',
fill: 'forwards'
}
);
}}>
play
)
}
```
## useGroup
useGroup is used to control multiple elements to animate with the same parameters
```ts
import { useGroup, EASING_FUNCTIONS } from 'ease-motion';
export default function App() {
const ballRef1 = useRef(null);
const ballRef2 = useRef(null);
const ballRef3 = useRef(null);
const controller = useGroup(
{
refs: [ballRef1, ballRef2, ballRef3],
keyframes: {
transform: ['translateX(0) rotate(0)', 'translateX(500px) rotate(2turn)']
},
options: {
duration: 3000,
fill: 'forwards',
easing: EASING_FUNCTIONS.easeOutInBack
},
onStart: () => {
console.log('start animate');
},
onPause: () => {
console.log('pause animate');
},
onResume: () => {
console.log('resume animate');
},
onComplete: () => {
console.log('complete animate');
}
},
[]
);
return (
controller.play()}>
play
controller.reverse()}>
reverse
controller.pause()}>
pause
controller.resume()}>
resume
)
}
```
## useMultiple
useMultiple is used to control the animation of multiple elements using independent animation parameters
```ts
import { useRef } from 'react';
import { useMultiple } from 'ease-motion';
export default function App() {
const ballRef1 = useRef(null);
const ballRef2 = useRef(null);
const ballRef3 = useRef(null);
const controller = useMultiple(
{
baseOptions: {
duration: 1000,
fill: 'forwards'
},
config: [
{
ref: ballRef1,
keyframes: [
{ transform: 'translateX(0) scale(1)', borderRadius: '0' },
{ transform: 'translateX(100px) scale(1)', borderRadius: '50%', offset: 0.2 },
{ transform: 'translateX(100px) scale(1)', borderRadius: '50%', offset: 0.6 },
{
transform: 'translateX(160px) scale(1.6, 1)',
borderRadius: '50%'
},
{
transform: 'translateX(360px) scale(1, 1)',
borderRadius: '50%'
}
]
},
{
ref: ballRef2,
keyframes: {
transform: ['translateX(200px) rotate(2turn)'],
borderRadius: ['4px']
},
options: {
duration: 500
}
},
{
ref: ballRef3,
keyframes: {
transform: ['translateX(0)', 'translateX(300px)'],
easing: 'steps(4)'
}
}
]
},
[]
);
return (
controller.play()}>
play
)
}
```
## useLineDraw
used to make svg elements(such as path, circle) to have a line animation effect
```ts
import { useRef } from 'react';
import { useLineDraw } from 'ease-motion';
export default function App() {
const path1Ref = useRef(null);
const path2Ref = useRef(null);
const controller = useLineDraw(
{
refs: [path1Ref, path2Ref],
drawType: 'appear',
options: {
duration: 1500,
fill: 'forwards',
easing: 'ease-in-out'
}
},
[]
);
return (
controller.play()}>
play
)
}
```
## useValue
useValue is used to animate numbers
```ts
import { useValue } from 'ease-motion';
export default function App() {
const [value, controller] = useValue(0, 100 {
duration: 5000,
autoPlay: false,
easing: 'easeOutCubic'
});
return (
{value}
isPlaying: {controller.isPlaying.toString()}
controller.play()}>
play
controller.pause()}>
pause
controller.resume()}>
resume
controller.cancel()}>
cancel
)
}
```
## useSpring
used to simulate the real physical spring motion effect
```ts
import { useSpring } from 'ease-motion';
export default function App() {
const [y, controller] = useSpring({ from: 0, to: 240, autoPlay: false });
return (
{controller.isPlaying ? 'playing...' : 'start'}
)
}
```