3 ms·

Isn't the WebAnimations API available in modern browsers?

• geenat 3y ago
  Sure but in many situations a vanilla async function gives you the same result without the extra layer.
  • the8472 3y ago
    The animation API is likely more efficient/smoother if it lets the browser offload the animation to separate threads without blocking the event loop or having to rerun layout. Any script-triggered CSS change is "unexpected" from a layout engine perspective. Registering your animation in advance makes it an expected change.
  • o1y32 3y ago
    There is no "extra layer" -- it is a browser API supported by every browser by bow, which means that it should be treated the same say as settimeout
• DigitalSea 3y ago
  Yes. But, that doesn't mean implementing these things is any easier. Maybe if you're sliding an element in and out, the WebAnimations API would suffice. If you're wanting to do advanced animation, you will end up creating your own library. With anime.js, you have better control over your animations. You can pause, play, reverse, and seek animations, as well as control their speed. It provides a powerful timeline feature which allows you to chain animations and control their sequence, something that is not available in the Web Animations API. You can also do things like line drawing and morphing, as well as animate CSS properties, SVG, DOM attributes and JavaScript Objects. You can do most things natively, if you have the time and luxury of reinventing the wheel.
  • SirHound 3y ago
    Fwiw Motion One and Framer Motion both have complex sequencing of WAAPI animations so you have the control but also the off-thread performance