Tween.js

class Tween extends Component {
	static defaultProps = {
		duration: 1000,
	}

	constructor(props) {
		super(props);

		this.state = {
			timeStart: +new Date(),
			start: props.defaultStart || 0,
			current: props.defaultStart || 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 (nextProps.end !== this.props.end) {
			this.setState((state) => ({
				timeStart: +new Date(),
				start: state.current,
			}));
		}
	}

	_calculate() {
		const { func, duration, end } = this.props;
		const { timeStart, start } = this.state;

		const time = +new Date() - timeStart;

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

		const currentPosition = func(time, start, end - start, duration);

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

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

		return children({ current });
	}
}