3 ms·

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

• 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 ago
    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.
    • SirHound 3y ago
      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.
• troupo 3y ago
  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.