via smashingmagazine.com => original post link
I previously viewed animations as something playful. Something that adds fuzziness to interfaces. Apart from that, in good hands, animation can make interfaces clearer. One property of animations on the Web that I didn’t hear much about is their precision. That Web Animations API allows us to drop workarounds concerned with JavaScript timing issues. In this article, you’ll see how not to do animations and how to coordinate animation of several elements.
When you work on a visual presentation of something that requires to be precise, you quickly learn that you spend too much time working around JavaScript’s inability to be exact about when code will actually execute. Try to implement something that relies on rhythm or shared timing and you will get my point. You might get close in certain cases but it’s never perfect.
One of the things I find helpful when working on complex problems is to break them down into smaller, simpler problems. It happens that smaller pieces — even if plenty — have something that unifies them. Something that allows you to treat them uniformly. In the case of animations, now that you have many more elements to deal with, you need something that will guarantee a level of timing precision that would exclude the possibility of drift, of elements going “off-beat”.