4 ms·
Mostly obsolete with CSS tweening. You can do non-blocking animation timelines without any library if you use async javascript. <html> <body> <div>Click
by geenat 3y ago
Mostly obsolete with CSS tweening.
You can do non-blocking animation timelines without any library if you use async javascript.
<html>
<body>
<div>Click me to change color every second, then remove.
<script>
// Locality of Behavior
me = document.currentScript.parentElement;
me.addEventListener("click", async event => {
me = event.target
me.style.transition = "background 1s"
await sleep(1000)
me.style.background = "red"
await sleep(1000)
me.style.background = "green"
await sleep(1000)
me.style.background = "blue"
await sleep(1000)
me.style.background = "none"
await sleep(1000)
me.remove()
})
const sleep = ms => new Promise(r => setTimeout(r, ms));
</script>
</div>
</body>
</html>
If you like this, you may also want to check out: https://github.com/gnat/surreal https://github.com/gnat/surreal
- imbnwa 3y agoIsn't the WebAnimations API available in modern browsers?
- geenat 3y agoSure but in many situations a vanilla async function gives you the same result without the extra layer.
- the8472 3y agoThe 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 agoThere 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 agoYes. 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 agoFwiw Motion One and Framer Motion both have complex sequencing of WAAPI animations so you have the control but also the off-thread performance
- geenat 3y agoWanted to note, htmx's companion project at https://hyperscript.org/ https://hyperscript.org/ does this naturally out of the box as well due to its async transparency.
- pjc50 3y agoThis looks interesting, and I _love_ how it takes influence from Hypercard. Even though I'm slightly too young to have really used that system.
- troupo 3y agoThe example is next to useless since it's so primitive. Anything more complex, and you end up developing your own library. Which you did, and linked. So how is anime.js obsolete?
- geenat 3y agoThe 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.
- SirHound 3y agoIf 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.
- troupo 3y agoRegardless 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.
- 5350-uiop-1130 3y ago> Mostly obsolete i'm so f#####g done with web dev.
- geenat 3y agohaha I mean, it's just built into browsers now. Nothing stopping someone from still using anime.js
- FreshStart 3y agoNo, no the browsers deprecated it yesterday.. You are supposed to add a webasm shard, containing the operation system for the animations.
- nextaccountic 3y agoI'm not entirely sure whether you're joking
- JulianGarnier 3y agoCreating something like the homepage of animejs.com without an animation library today is still quite challenging.
- have_faith 3y agoBrowsers are missing a long list of features available in modern JS animation libraries like Anime.js and especially GreenSock. For simple and short transitions/animations CSS will take you a long way though.
- o1y32 3y agoBad practice, requestAnimationFrame is preferred for such purposes: https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame https://developer.mozilla.org/en-US/docs/Web/API/window/requ... https://stackoverflow.com/questions/38709923/why-is-requestanimationframe-better-than-setinterval-or-settimeout https://stackoverflow.com/questions/38709923/why-is-requesta... ...and based on that I'm afraid you shouldn't be giving out advice on doing animations
- pyentropy 3y agoHe's not using the timer to do per-frame calculations - the GPU does the interpolation using the `transition` property. He's just using the timer for setting the target state.
- IggleSniggle 3y agoThere’s a difference between creating your own draw-loop with setTimeout and requesting a CSS animation. Whether you use requestAnimationFrame which calls your code at every draw step or whether you set a CSS animation directive, you are delegating the animation work to the browser. In either case, the resultant behavior is dependent on browser-code, not your own js. This is very different than setting up your own manual draw loop with setTimeout.
- hombre_fatal 3y agoLibs like Anime.js are declarative and programmatic. They might be implemented with something that looks like your snippet, but that doesn't mean your snippet supersedes a declarative, programmatic API. Just like el.innerHTML = '<h1>hi</h1>' doesn't supersede React.js.
- Bellend 3y agoAre you really comparing this to Anime.js? I don't know if it's satire.