{"repo":"inokawa/react-animatable","free":true,"listed":false,"github":"https://github.com/inokawa/react-animatable","clone":"git clone https://github.com/inokawa/react-animatable.git","description":"Tiny(~1kB) animation hooks for React, built on Web Animations API.","language":"TypeScript","stars":117,"topics":["react","css","animation","svg","transition","tween","web-animations","d3","react-hooks","react-component"],"license":"MIT","category":"ui-components","readme_excerpt":"react-animatable Tiny( 1kB) animation hooks for React, built on Web Animations API. Features - Easy integration with a few lines of code. Works with any UI component libraries or CSS-in-JS libraries. - Performant animation driven by native Web Animations API (WAAPI). Also supporting ScrollTimeline and ViewTimeline. - Fully typed with TypeScript, which is stricter than TypeScript's lib.dom.d.ts. - Tiny. Each hooks are 1kB gzipped and the total is 2kB gzipped. - HTML, SVG, Canvas and anything can be animated. Motivation Animating something in React can be complicated than we expected, even with today's popular libraries. Web Animations API (WAAPI) looks like a brand-new promising way, because it's performant, it doesn't need JS runtime, it doesn't mutate style of DOM so it will not conflict with React's state, and it will become more convenient in the future (ScrollTimeline and ViewTimeline is an example). However using raw WAAPI with React is bit tricky and having risks of memory leak. This library is what to solve the problem. Demo https://inokawa.github.io/react-animatable/ Install Requirements - react = 16.14 If you use ESM and webpack 5, use react = 18 to avoid Can't resolve react/jsx-runtime error. And in some legacy browsers that does not support Web Animations API, you may need to use polyfill. If you use ScrollTimeline or ViewTimeline, check browser support. Usage 1. Define your animation with useAnimation hook. The hooks accepts canonical keyframe format objects and K","default_branch":null,"files":null,"tree":[],"storefront":"/r/inokawa","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/inokawa/react-animatable/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}