tweened
A simple, declarative and composable animation library for React.
NOTE: I recommend to use my new library https://github.com/inokawa/react-animatable
This is under development and APIs are not stable.
Demo
https://inokawa.github.io/tweened/
Motivation
Animating something in React usually becomes complicated than we expected... This library is an experiment to find out the proper way for React to define how to animate.
The core of this library is simple. Pass [value] to element if you want to animate the attribute / style and pass value if you don't want. It's easy to learn and it wouldn't take time to integrate to / remove from your project.
And also aiming to achieve performant and flexible animation in React, but be lightweight as much as possible.
Install
npm install tweenedRequirements
- react >= 16.14
Usage
import { useState } from "react";
import { tween as t } from "tweened";
const App = () => {
const [completed, setCompleted] = useState(false);
return (
<svg width={600} height={400} viewBox="0 0 600 400">
<t.g
duration={800}
fill={[completed ? "green" : "red"]}
transform={[`translate(${completed ? 200 : 50}, 50)`]}
onTweenEnd={() => {
setCompleted((prev) => !prev);
}}
>
<t.rect y={4} width={[completed ? 200 : 20]} height={2} />
<text fontSize={24}>Hello world</text>
</t.g>
</svg>
);
};And see examples for more usages.
TODOs
- [ ] APIs
- [x] Basic tweening
- [ ] Enter / Exit transition
- [ ] Chained animation (keyframes)
- [ ] Custom interpolator (ex. text tweening)
- [ ] Cancel / Resume animation
- [ ] Timeline manipulation (like GSAP)
- [ ] Orchestrated animation across components
- [ ] Platforms
- [x] React (JS backend)
- [ ] React (opt-in Web Animations API backend)
- [ ] React Native
- [ ] Support concurrent feature of React 18
- [ ] Optimize bundle size
- [ ] Documentation