Batteries included animation toolkit for web developers and designers.
🎨 Craft animations in Figma. Make them an integral part of your design process.
🛠 Implement in React. Powerful library with precise high- and low-level control. Hardware accelerated.
👁️ Observe and debug in Dev Tools. Go back in time and adjust your béziers.
Note: This toolkit is currently under active development 🚧
![](https://private-user-images.githubusercontent.com/32528507/259456713-5f277d4c-7a5e-4659-b940-7cf39173f5df.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk5MTk3NzgsIm5iZiI6MTczOTkxOTQ3OCwicGF0aCI6Ii8zMjUyODUwNy8yNTk0NTY3MTMtNWYyNzdkNGMtN2E1ZS00NjU5LWI5NDAtN2NmMzkxNzNmNWRmLmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMTglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjE4VDIyNTc1OFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTg4NWY1ZWJkOGNlY2RkYTE3ZWUwOWFiOTg3ZmQwMWNiOGY4YzU5Njg0ZGQxNTNhYTNiNjA2ZjUyM2U0MTZmZTQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.xOffwHKJ2lQP7r4EykMnGe_5tcqCY0aIFDZjoZllaTo)
return (
<m.div
animate={{
opacity: 1,
rotateZ: 180,
borderRadius: 20,
scaleX: 1,
scaleY: 1,
transition: {
easing: 'spring',
},
}}
/>
);
npm i motioned
# or
yarn add motioned
# or
pnpm add motioned
MIT