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.

https://inokawa.github.io/tweened/

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.

npm install tweened

• react >= 16.14

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.

• APIs
  • 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
  • React (JS backend)
  • React (opt-in Web Animations API backend)
  • React Native
• Support concurrent feature of React 18
• Optimize bundle size
• Documentation

• D3.js
• Web Animations API
• resonance
• react-move
• react-flight
• framer-motion
• react-spring
• d3-render
• styled-components
• react-router