Awesome

tweened

npm npm bundle size

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 tweened

Requirements

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.