81–90 of 133 posts
Now that css is getting a linear() function we can get all kinds of spring/bounce/elastic animations that we couldn't before (hence why we resorted to JS). https://twitter.com/JoshWComeau/status/1660684634340962305 Once this lands stable in all browser we can say goodbye to JS library animations (rightly so since they block the main thread).
Awesome looking website, though the documentation hijacking my back button was awful.
Earlier quoted context omitted.
The 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?
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.
Earlier quoted context omitted.
Isn't the WebAnimations API available in modern browsers?
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 feat…
Anime is such a specific use, and this is disappointing for anyone with that use in mind. Naming things is hard I guess????
Anime (アニメ) is literally short for animation (アニメーション, animeishon).
Now that css is getting a linear() function we can get all kinds of spring/bounce/elastic animations that we couldn't before (hence why we resorted to JS). https://twitter.com/JoshWComeau/status/1660684634340962305 Once this lands stable in all browser we can say goodbye to JS library animations (rightly so since they block the main thread).
Web Animations API isn't blocking IIRC. https://motion.dev/ uses it.
1. https://webcache.googleusercontent.com/search?q=cache:Pa8-Oa...
One less known use case for this is creating animated UI demos, which as a dev I find harder to do using video editing software. I used it to create the simple demo on the rcmd frontpage: https://lowtechguys.com/rcmd This is the code, where I'm just animating elements of an SVG I previously created with Sketch: https://github.com/FuzzyIdeas/lowtechguys/blob/main/src/rcmd... I'm also doing the same thing for the Lunar…
In BTT I have currently set right cmd as a second hyper key (first one being caps). I could see rcmd being useful if I can define on a per key basis if it should run or not.
PS: Great blog you have
One less known use case for this is creating animated UI demos, which as a dev I find harder to do using video editing software. I used it to create the simple demo on the rcmd frontpage: https://lowtechguys.com/rcmd This is the code, where I'm just animating elements of an SVG I previously created with Sketch: https://github.com/FuzzyIdeas/lowtechguys/blob/main/src/rcmd... I'm also doing the same thing for the Lunar…
Does rcmd expose an api to e.g. call it via shell action in BTT? I would like to keep using BTT for higher level config. In BTT I have currently set right cmd as a second hyper key (first one being caps). I could see rcmd being useful if I can define on a per key basis if it should run or not. PS: Great blog you have
No, rcmd does not expose any API, but you can disable/enable only specific letters from the Settings: https://shots.panaitiu.com/zz8Y2kxL
You can also change the trigger key from ⌘ Right Command to any combination of direction-aware modifiers.
Also, if you don't make use of rcmd's dynamically assigned apps and you prefer to assign a letter to a specific app, you can use BTT only for this, no need for going through rcmd.
BTT has a focus-or-open action and it's what I used before building rcmd. It can't hide or cycle apps with the same letter like rcmd does but it's good enough for some people.
For simple use cases, I found animate.css[1] very handy. [1] https://animate.style/