tweenHoC.js

const tween = ({ tween, duration = 1000, defaultStart, end }) => (BaseComponent) => {
	return class Tween extends Component {
		constructor(props) {
			super(props);

			this.state = {
				timeStart: +new Date(),
				start: defaultStart(props) || 0,
				current: defaultStart(props) || 0,
			};
			this.calculate = this._calculate.bind(this);
		}

		componentDidMount() {
			this.timer = setInterval(this.calculate, 1000 / 60);
		}

		componentWillUnmount() {
			if (this.timer) {
				clearInterval(this.timer);
			}
		}

		componentWillReceiveProps(nextProps) {
			if (end(nextProps) !== end(this.props)) {
				this.setState((state) => ({
					timeStart: +new Date(),
					start: state.current,
				}));
			}
		}

		_calculate() {
			const { timeStart, start } = this.state;

			const time = +new Date() - timeStart;

			if (time > duration) {
				this.setState(() => ({
					current: end(this.props),
				}));
				return;
			}

			const currentPosition = tween(time, start, end(this.props) - start, duration);

			this.setState(() => ({
				current: currentPosition,
			}));
		}

		render() {
			const { current } = this.state;

			return <BaseComponent {...this.props} current={current} />
		}
	};
};