React Tween State Animation Library

Common errors

• TypeError: React.createClass is not a function

  cause Attempting to use `React.createClass` (required by `react-tween-state`) with React v16 or newer, where this API has been removed.
  fix This library is incompatible with modern React. You must downgrade your React version to v15 or earlier, or preferably, choose a modern animation library that uses class components or functional components/hooks.

• Invariant Violation: Mixins are deprecated and not supported in React 16+.

  cause React versions from v0.13.0 onwards deprecated mixins, and v16 removed them entirely. Using `mixins: [tweenState.Mixin]` triggers this error.
  fix See the fix for `TypeError: React.createClass is not a function`. The library cannot be used with modern React versions due to its reliance on deprecated features.

• TypeError: this.tweenState is not a function

  cause The `tweenState` method is provided via the `tweenState.Mixin`. This error occurs if `tweenState.Mixin` is not included in the component's `mixins` array, or if the component is not created using `React.createClass`.
  fix Ensure your component is defined using `React.createClass` and includes `tweenState.Mixin` in its `mixins` array. Example: `var App = React.createClass({ mixins: [tweenState.Mixin], /* ... */ });`

• Uncaught ReferenceError: require is not defined

  cause Using `require()` syntax directly in a browser environment without a CommonJS bundler (like Webpack or Browserify) in place, or without a global `require` implementation.
  fix This library is designed for CommonJS environments. For browser usage, you need to use a module bundler to process the `require()` calls or ensure the library is included via a script tag in a way that exposes `tweenState` globally, though a bundler is the standard approach.

Warnings

• breaking This library is built exclusively for older versions of React (pre-v0.13 through v15) and relies on `React.createClass` and the mixin system. It is fundamentally incompatible with React v16 and newer, which removed `React.createClass` and deprecated mixins.
  Fix: Use modern animation libraries like `react-spring`, `framer-motion`, or `react-transition-group` that are compatible with class components and functional components/hooks.
• gotcha The library is unmaintained since 2016 (version 0.1.5) and receives no updates, bug fixes, or security patches. Using it in production introduces significant technical debt and potential vulnerabilities.
  Fix: Migrate to an actively maintained animation library compatible with your React version.
• gotcha `react-tween-state` does not offer official TypeScript definitions. While community types might exist, they are not guaranteed to be up-to-date or accurate, leading to potential type-related issues when used in TypeScript projects.
  Fix: Consider using an animation library that provides first-party TypeScript support or migrate to JavaScript for the animation logic if sticking with `react-tween-state` is unavoidable.
• gotcha The `this.tweenState` call immediately sets the underlying state field to its `endValue` and then interpolates a separate 'tweening value' accessible via `this.getTweeningValue`. This can be counter-intuitive if you expect the actual component state to reflect the interpolated value at all times.
  Fix: Always retrieve the animated value using `this.getTweeningValue(path)` within your `render` method, not directly from `this.state[path]`, when an animation is in progress.

Install

• npm install react-tween-state npm
• yarn add react-tween-state yarn
• pnpm add react-tween-state pnpm

Imports

• tweenState (main import)
  wrong:

  import tweenState from 'react-tween-state'

  correct:

  const tweenState = require('react-tween-state');

  This library is CommonJS-only and relies on React mixins, which are incompatible with modern ES module imports and functional components.
• Mixin
  wrong:

  class App extends React.Component { /* ... */ }

  correct:

  var App = React.createClass({ mixins: [tweenState.Mixin], /* ... */ });

  The core functionality is exposed via a React mixin, which is deprecated in React v0.13+ and removed in React v16+. Not compatible with modern class components or functional components.
• easingTypes
  wrong:

  import { easingTypes } from 'react-tween-state'

  correct:

  tweenState.easingTypes.easeInOutQuad

  Easing functions are exposed as properties on the main `tweenState` object after requiring the package. There is no direct named export for `easingTypes`.

Quickstart

Demonstrates how to integrate `react-tween-state` using a `React.createClass` component with its mixin, animate a state property (`left`), and retrieve the tweening value during render. This requires an older React setup.

const tweenState = require('react-tween-state');
const React = require('react');
const ReactDOM = require('react-dom'); // Required for rendering

const App = React.createClass({
  mixins: [tweenState.Mixin],
  getInitialState: function() {
    return { left: 0 };
  },
  handleClick: function() {
    // Animate 'left' property of the state
    this.tweenState('left', {
      easing: tweenState.easingTypes.easeInOutQuad,
      duration: 500,
      endValue: this.state.left === 0 ? 400 : 0,
      onEnd: () => console.log('Animation ended!')
    });
  },
  render: function() {
    const style = {
      position: 'absolute',
      width: 50,
      height: 50,
      backgroundColor: 'lightblue',
      left: this.getTweeningValue('left'), // Retrieve the current tweening value
      cursor: 'pointer',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      color: 'white'
    };
    return (
      <div style={style} onClick={this.handleClick}>
        Click Me
      </div>
    );
  }
});

// This code needs an HTML file with <div id="root"></div> and
// older versions of React/ReactDOM (e.g., v15) to run successfully.
// For example, in an HTML file with script tags for React, ReactDOM, and this example:
// ReactDOM.render(<App />, document.getElementById('root'));