Skip to content
DEPRECATED - Recommend https://github.com/tannerlinsley/react-move instead!
Branch: master
Clone or download
Latest commit 947b3e7 May 14, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src remove onEnd to reduce API surface Dec 18, 2016
.babelrc fix eslint Nov 1, 2016
.eslintrc make group optional Dec 7, 2016
.gitignore update usage Dec 18, 2016
LICENSE
README.md deprecate notice May 14, 2017
TODO update usage Dec 18, 2016
index.html add nested tween Dec 4, 2016
package.json publish deprecate May 14, 2017
webpack.config.common.js fix lib name Dec 4, 2016
webpack.config.dev.js make group optional Dec 7, 2016
webpack.config.dist.js rename dist webpack Dec 18, 2016
yarn.lock custom delay Dec 8, 2016

README.md

react-tween

DEPRECATED - Recommend https://github.com/tannerlinsley/react-move instead!

Tween animation for React components

Demo

Usage

Animate props with Tween.

function Example({ color, ...props }) {
  return (
    <Tween
      style={{ color }}
    >
      {style => (
        <div
          style={{ backgroundColor: style.color }}
        />
      )}
    </Tween>
  );
}

Customize easing, duration, and delay.

import { easeCubicInOut } from 'd3-ease';

function Example({ color, ...props }) {
  return (
    <Tween
      easing={easeCubicInOut}
      delay={1000}
      duration={500}
      style={{ color }}
    >
      {/* ... */}
    </Tween>
  );
}

Animate added or removed items with Tween.TransitionGroup.

  • In this example, the collection is a list of meetings.
  • When a meeting is added, it fades in (willEnter).
  • When a meeting is removed, it fades out (willLeave).
function Example({ meetings, ...props }) {
  return (
    <Tween.TransitionGroup
      styles={meetings.map(meeting => ({
        key: meeting.id,
        style: {
          opacity: 1,
        },
        data: meeting,
      }))}
      willEnter={style => ({ ...style.style, opacity: 0 })}
      willLeave={style => ({ ...style.style, opacity: 0 })}
    >
      {styles => (
        <div>
          {styles.map(style => (
            <div
              key={style.key}
              style={{ opacity: style.style.opacity }}
            >
              {style.data.title}
            </div>
          ))}
        </div>
      )}
    </Tween.TransitionGroup>
  );
}

For Tween.TransitionGroup, each style is a TransitionStyle, which has the following format.

{
  key, // item id
  style: { ... }, // plain style object (same format as style for `Tween`)
  data, // item data
}

willEnter and willLeave are passed TransitionStyles and should return plain style objects.

Synchronizing animations

By default, Tweens animate whenever their styles change. If you want control over when animation begins, set the group prop. If the group prop is set, animation only begins when the value of this prop changes. group is essentially a logical grouping of animations that should run together.

function Example({ color1, color2, invalidationCounter, ...props }) {
  return (
    <div {...props}>
      <Tween
        group={invalidationCounter}
        style={{ color: color1 }}
      >
        {/* ... */}
      </Tween>
      <Tween
        group={invalidationCounter}
        style={{ color: color2 }}
      >
        {/* ... */}
      </Tween>
    </div>
  );
}

Comparison to react-motion

Choose react-tween or react-motion based on whether you want tween or spring animation.

  • If you want natural, physical motion, use spring animation.
  • If you want to specify a duration, or you do not want a bounce, use tween animation.

Setup

yarn
yarn start
# Visit http://localhost:8080
You can’t perform that action at this time.