{"id":17342,"library":"react-tween-state","title":"React Tween State Animation Library","description":"react-tween-state is an animation utility for React applications that enables smooth interpolation of component state values over time. It provides a `this.tweenState` method, which functions similarly to `this.setState`, but initiates an animated transition of a state property to a target value over a specified duration. The library relies heavily on React's deprecated mixin system (`React.createClass`) for integration into components. The current and likely final stable version is 0.1.5, released in 2016, and the project has been unmaintained since then. Its core differentiators, such as direct state manipulation via mixins and an imperative `tweenState` API, are now considered anti-patterns in modern React development, which favors declarative component-based animation libraries and hooks. It does not support newer React features or functional components.","status":"abandoned","version":"0.1.5","language":"javascript","source_language":"en","source_url":"https://github.com/chenglou/react-tween-state","tags":["javascript","react","animation","tween","transition","state","interactive","mixin","interpolation"],"install":[{"cmd":"npm install react-tween-state","lang":"bash","label":"npm"},{"cmd":"yarn add react-tween-state","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-tween-state","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Provides the React runtime environment and component model (specifically `React.createClass` and mixins) that this library integrates with, requiring older React versions.","package":"react","optional":false}],"imports":[{"note":"This library is CommonJS-only and relies on React mixins, which are incompatible with modern ES module imports and functional components.","wrong":"import tweenState from 'react-tween-state'","symbol":"tweenState (main import)","correct":"const tweenState = require('react-tween-state');"},{"note":"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.","wrong":"class App extends React.Component { /* ... */ }","symbol":"Mixin","correct":"var App = React.createClass({ mixins: [tweenState.Mixin], /* ... */ });"},{"note":"Easing functions are exposed as properties on the main `tweenState` object after requiring the package. There is no direct named export for `easingTypes`.","wrong":"import { easingTypes } from 'react-tween-state'","symbol":"easingTypes","correct":"tweenState.easingTypes.easeInOutQuad"}],"quickstart":{"code":"const tweenState = require('react-tween-state');\nconst React = require('react');\nconst ReactDOM = require('react-dom'); // Required for rendering\n\nconst App = React.createClass({\n  mixins: [tweenState.Mixin],\n  getInitialState: function() {\n    return { left: 0 };\n  },\n  handleClick: function() {\n    // Animate 'left' property of the state\n    this.tweenState('left', {\n      easing: tweenState.easingTypes.easeInOutQuad,\n      duration: 500,\n      endValue: this.state.left === 0 ? 400 : 0,\n      onEnd: () => console.log('Animation ended!')\n    });\n  },\n  render: function() {\n    const style = {\n      position: 'absolute',\n      width: 50,\n      height: 50,\n      backgroundColor: 'lightblue',\n      left: this.getTweeningValue('left'), // Retrieve the current tweening value\n      cursor: 'pointer',\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      color: 'white'\n    };\n    return (\n      <div style={style} onClick={this.handleClick}>\n        Click Me\n      </div>\n    );\n  }\n});\n\n// This code needs an HTML file with <div id=\"root\"></div> and\n// older versions of React/ReactDOM (e.g., v15) to run successfully.\n// For example, in an HTML file with script tags for React, ReactDOM, and this example:\n// ReactDOM.render(<App />, document.getElementById('root'));","lang":"javascript","description":"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."},"warnings":[{"fix":"Use modern animation libraries like `react-spring`, `framer-motion`, or `react-transition-group` that are compatible with class components and functional components/hooks.","message":"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.","severity":"breaking","affected_versions":">=0.13.0"},{"fix":"Migrate to an actively maintained animation library compatible with your React version.","message":"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.","severity":"gotcha","affected_versions":">=0.1.5"},{"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.","message":"`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.","severity":"gotcha","affected_versions":">=0.1.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"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.","cause":"Attempting to use `React.createClass` (required by `react-tween-state`) with React v16 or newer, where this API has been removed.","error":"TypeError: React.createClass is not a function"},{"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.","cause":"React versions from v0.13.0 onwards deprecated mixins, and v16 removed them entirely. Using `mixins: [tweenState.Mixin]` triggers this error.","error":"Invariant Violation: Mixins are deprecated and not supported in React 16+."},{"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], /* ... */ });`","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`.","error":"TypeError: this.tweenState is not a function"},{"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.","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.","error":"Uncaught ReferenceError: require is not defined"}],"ecosystem":"npm","meta_description":null}