> Animating elements out is not very straightforward in React, so let's keep all of the <circle>s rendered, and give them an opacity if they're not in the currently shown circles.
...Which is the crux of the problem I always run into trying to do complicated animations in React
CSS is pretty terrible for interactive and cancellable animations, and React does not make it easy to do exit transitions for which CSS provides no solution. Hence the existence of libraries like react-transition-group, react-motion, and react-spring. Letting D3 control DOM rendering is another solution to this problem.
I am pretty sure that this particular example can be done with css in a fairly straight-forward manner. In general case I agree with you. CSS only will take you so far.
> Animating elements out is not very straightforward in React, so let's keep all of the <circle>s rendered, and give them an opacity if they're not in the currently shown circles.
...Which is the crux of the problem I always run into trying to do complicated animations in React