4 ms·
If thread blocking is a problem then your example would stutter at every await. VS using https://motion.dev/api/timeline https://motion.dev/api/timeline or Fram
by SirHound 3y ago
If thread blocking is a problem then your example would stutter at every await. VS using https://motion.dev/api/timeline https://motion.dev/api/timeline or Framer Motion both of which can sequence complex WAAPI animations.
- geenat 3y agoIt 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.
- SirHound 3y agoIt 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.