The high-performance extension of Web Animation API for React Hooks
npm install ease-motionThe high-performance extension of Web Animation API for React Hooks
``bash`
npm install ease-motion
the preset motions
`ts
// App.tsx
import { useMotion } from 'ease-motion';
export default function App() {
const [ ref, motion ] = useMotion
return (
useAnimate
basic wrap of Web Animation API
ts
import { useAnimate} from 'ease-motion;'
export default function App() {
const [ ref, animate ] = useAnimate();
return (
onClick={() => {
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 (
)
}
`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 (
)
}
`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 (
width="100"
height="100"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round">
)
}
`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()}
)
}
`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 (
style={{ transform: translateY(${y}px)}}>