The fundamental building block of the vanilla js snippet and anime.js is the ability to create non-blocking timelines + tweens- which we get for free now.

the optional "lib" is just aliases to make vanilla js less verbose.

If thread blocking is a problem then your example would stutter at every await. VS using https://motion.dev/api/timeline or Framer Motion both of which can sequence complex WAAPI animations.

It won't stutter because the actual animation is done by the browser CSS engine.

await is only used to build the non-blocking timeline: Think keyframes, not frames.

It will stutter because if your browser is under heavy load then your async function will run when the browser is free to do so - not at the 1s mark as specified by your transition.

If you instead build the keyframes up front and give them to WAAPI/CSS then you won’t encounter stutters.

This is easily provable by adding some blocking JS into your code. Block the main thread for ten seconds after your first transition and see when that next await triggers. Your animation will run smoothly for 1 second and then the next chunk of your timeline won’t run for another 9.

Regardless of the "fundamental building block" when you need actual complex animations, you will end up building your own lib anyway.

Because `await setStyle` ain't it.