Animation

If you’ve held a reference to the Metaballs element, there’s an updateCircles method that takes care of transitioning between two sets of data.

For example, to transition between two states:

this.metaballRef.current.updateCircles(newCircles)

The original transitions were written with one line in CSS, but this approach was abandoned because of compatibility issues.

path {

transition: d 300ms ease-in-out;

}

If only animation were this simple. This actually works in Google Chrome, but only Google Chrome :( For other, modern browsers there is the SVG animate element, but this too has compatibility concerns. Other guides on React SVG Animations suggest requestAnimationFrame , but this seemed to likely to cause issues and too difficult to manipulate animation properties like easing.

Enter d3 (pun intended)! d3 comes with tons of options, and has supports animating the d property easily. By creating a component that encapsulates a path element, animating the d property was easy:

componentWillReceiveProps(nextProps) {

if (this.props.path !== nextProps.path) {

let { duration, easement = d3.easeLinear } = this.props;

this.path.transition()

.ease(easement)

.attr('d', nextProps.path)

.on('end', () => this.setState({

path: nextProps.path

}))

.duration(duration);

}

}