setInterval isn't the problem. He's animating the CSS position (top, left), which triggers a full reflow and causes the stuttering. Always animate with translate3d, which is GPU accelerated.
setInterval is definitely the main issue here, especially with a 30ms delay, 33 or 16 would at least give it a chance to sync with refresh rates. Absolutely positioned elements do not trigger reflow, as the element is removed from the normal document flow [1]. See my example in another comment.
[1] https://developer.mozilla.org/en-US/docs/Web/CSS/position#ab...
[0] https://css-tricks.com/tale-of-animation-performance/
[1] https://www.paulirish.com/2012/why-moving-elements-with-tran...
Once you're hitting 60fps there is no difference in smoothness regardless of method.
But in reality, it looks better if you avoid subpixel values, as the image will flicker slightly; the frames not aligned with the pixel grid will suffer blur or distortion. Try setting speed to 0.1 in the example to see it wobble. The effect is noticeable even on hi-dpi screens.
Not saying you should animate anything using position these days, CSS transforms are certainly the right tool.
It’s just another property which can sometimes be used to do what you could earlier only do with ‘position:’, but there are still many cases (the majority) you position things using the “old” position property.
They have different uses, and for that reason one also requires a reflow while the other does not.
https://www.html5rocks.com/en/tutorials/speed/high-performan...
All I can say is use it, a lot. CSS skills are more of a dark art than anything resembling engineering. And the only way you get good is by trial and error, learning what works best and why.
The animations built into the platform can run and remain smooth under a broader range of conditions, which is why they should be preferred if you don't need the level of control that running script via requestAnimationFrame gives you.