// Or use a polyfill:
// import requestAnimationFrame from 'raf';

const { requestAnimationFrame } = window;

const animate = () => {
    requestAnimationFrame(animate);

    // Perform an animation step
    x += velocity;
}

// Fire it up
requestAnimationFrame(animate);

const animate = timestamp => {
    const delta = timestamp - prevTimestamp;

    // Note, it's a function now!
    x += velocity(delta);

    requestAnimationFrame(animate);
};

const redraw = _ => {
    points.forEach(point => {
        // make sure `will-change: transform` is set
	point.element.style.transform = `
	    translate3d(${point.x}px, ${point.y}px, 0.0px)
            rotate(${point.angle}rad)`
    });
};

const tick = ts => {
    _lastRaf = requestAnimationFrame(tick);

    physicsStep(delta);
    redraw(delta);
}

// CSS property
// transition: transform is ease;

// Conditional state change
<div className ={isVisible ? 'is-visible' : 'is-hidden'} />

// Direct style manipulation
<div style={{ transform: `translate(${scale})` }} />

class Dialog extends Component{
    componentDidMount(){
        const node = findDOMNode(this);
        // Or $.animate, anime.js, GSAP, D3 ...
	Velocity(node, {scale: 1.5},
	    {duration: 1000});
    }

    render(){ ... };
};

class Dialog extends Component{
    componentDidMount(){
        const node = findDOMNode(this);

        // animate returns a cancellable
        // promise-like object
	this._anim = animate(node, { ... });
    }

    componentWillUnmount(){
        this._anim && this._anim.cancel();
    }
};

<Animated>
    { this.state.showDialog && <Dialog /> }
</Animated>

<div>
    { this.state.showDialog && <Dialog /> }
</div>

const element = <Dialog size="medium" />
// => { type: Dialog, props: { size: 'medium' }, ... }
const element = React.createElement(Dialog, { size: 'medium'});

componentWillReceiveProps(nextProps){
    // Exit transition
    if(this.props.children && !nextProps.children){
        return this.transitionState(st.EXITING,
	    {children: this.props.children})
    };
}

transitionState(transitionTo, opt = {}){
    // .. FSM logic ..
    // Wait for `this._content.animateExit()`
}

import Transition from 'react-transition-group/Transition';

// `state` is 'entered', 'entering', 'exited' etc.
<Transition in={isVisible} timeout={duration}>
    {state => <ModalDialog animationState={state} />}
</Transition>

render(){
    return <canvas />
}

// Render only once!
shouldComponentUpdate() {
    return false;
}

componentWillReceiveProps(nextProps){
    if(this.props.color != nextProps.color){
        // Animate on canvas...
    }
}

// Limit delta to avoid divergence
const delta = Math.min(100.0, ts - prevTs);
const P = 0.001 + delta;

this.x = P + (this.target - x);