Hi, I'm the creator of Anime.js.
Firstly, thank you for the submission. I honestly didn't anticipate being featured on the homepage of HN without any major update to the library!
To those wondering why the project hasn't been updated recently, it's simply because I've been working on a new version (V4) for the last two years.
The core library has been completely rewritten, I'm currently in the testing and documentation phase and should be ready for release by this summer.
Some of the new features of V4 include:
* Improved performance: The library has been entirely rewritten with performance optimization and low memory usage in mind.
* New ESM Module first API: Import only what you need and benefit from improved tree shaking.
* Better timelines: New options for animation positioning, allowing looping animations in timelines and improved parameters inheritance.
* Additive animations: A new tween composition mode that lets you smoothly blend concurrently running animations.
* Variable framerate: Specify different framerates for each animation or set it globally.
* New callbacks: onTick, onLoop, onRender, etc.
* Value modifiers: A function to modify or alter the behavior of the numerical values of the animated property value before rendering.
* Animate from: Animation from a given value to the current target value.
* Improved documentation: A new design with enhanced animations demos and more in-depth explanations.
So another comment says that CSS Tweening makes your lib obsolete, which I don't think is true, but,
Can Anime.js make use of CSS Tweening on browsers that support it? Maybe as an optimization, rather than using requestAnimationFrame, on some kinds of animations
I am actually writing a piece right now on the best animation frameworks for React (Framer Motion, react-spring etc.)
Was including Amine when I found this very recent HN post. I'm curious, in your perspective, what are the benefits of using Amine over something like Framer Motion? And would you recommend using the react-amine npm package or doing a custom binding—couldn't tell if that package was official.
I'm also doing the same thing for the Lunar frontpage: https://lunar.fyi/
But because Lunar's demo is a lot more resource intensive, I pre-rendered it into a video, and heavily optimized it for each screen size, in H.265, WEBM and H.264.
One of the biggest hurdles in Lunar's case was how to make the video have transparent regions. With Anime.js you are able to animate individual elements, placed around static text and buttons, which you can't do with videos.
Alpha support in videos is not so good, so I had to create a full-page video (in both portrait and landscape) with the right background color, and placed it as a background layer with a low z-index.
Finding the right video compression parameters to avoid background grain was not easy.
After a bit of reluctance to give up my right CMD-key, I decided to try rcmd and it has since disappeared into my workflow like no other app since window snapping.
Unlike similar solutions, unused keys are assigned dynamically based on the first letter of the app. So I can have my main apps on 1,2,3... and the rest will change based on which apps are open.
As a windows power user using OSX for work, does your tool allow you to cycle through open windows by repeating the button?
While I do love cmd+` for window switching in OSX, I still prefer Win+#### (repeated taps of the same number like Win+1,1,1) to cycle through my chrome windows in a known order. (So Win+1,1 always opens my second chrome window).
Also for anyone else in this situation, is there a way to click on an app in the OSX dock and have it not surface every single window all at once? 2 years of OSX and I still struggle when all 6 chrome windows are surfaced and drown out my perfectly arranged other work.
By default it doesn't do that, because window focusing needs special privileges that App Store apps don't have.
There is an addon thing that you can install by clicking on the Switcher button and scrolling all the way to the bottom to find the Install experimental window switching button.
I've been using a simple home-made Autohotkey script for years (decade?) to do it more like rmcd is doing.
Here's an example for opening Chrome or switching to it if it's open. If there is more than one Chrome window open it cycles between them by minimizing the current one, then opening the next one etc.
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.
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.
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.
If thread blocking is a problem then your example would stutter at every await. VS using https://motion.dev/api/timeline or Framer Motion both of which can sequence complex WAAPI animations.
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.
Libs 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.
Browsers 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.
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.
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.
He'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.
There’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.
Does one of these tools support an animation timeline with arbitrary seeking? Essentially I want to be able to have a progress slider representing the current time, and if the user clicks on any time on the slider, all animations should spring to that state, like a YouTube video. I played around with GSAP, anime and some others, but none properly supported playing the animations "backwards" (while jumping back).
I wrote my own implementation of a declarative animation engine (i.e. the same timeline position always looks the same), but I'm pretty sure there are still a couple of bugs allowing you to go out of sync.
Has anyone done any benchmarks comparing the different solutions?
I hit a performance bug with greensock once and just quickly wrote my own simple animation framework, which I am using ever since, but I suppose it can be done better. I would think the native browser animation capability is superior?
I was looking for an animation library some time ago, and theatrejs looks incredible. Anybody has any experience with it? In the end I used blender for what I needed, but I got very curious about it.
I used motion.dev on a couple of test projects when I heard of it. And it's nice, the docs can be a bit lacking, though, and the userbase is tiny enough to have little to no discussion online.
Slick front page with one of the best documentation pages I've come across. A sprawling v4 rewrite is in the works and Julian seems to have been picking up steam on it lately.
My concern is that the CPU usage is very high when you are not actively interacting with the site. So if you leave the tab open, then go do something else, you will be wasting a lot of CPU resources.
The only real way around that would be to put in a 5FPS cap after a minute of idle time (no mouse movements or scrolling), and additional culling for things that have scrolled out of view.
Every browser I've come across suspends `requestAnimationFrame` callbacks when the page is not the focused tab. You won't be wasting resources, the animations will all suspend when you're not looking at them.
Anime is nice, however you should likely use Framer Motion these days if using React or Motion One if not (both are by the same creator but for different use cases).
Framer motion is quite bad with drag events in responsive layouts that have drag boundaries. It requires workarounds that are quite finicky. In my experience it has some performance issues too in edge cases where Gsap just chugs along.
motion.one can only be used to animate node elements, not arbitrary data, so you’ll likely hit a wall eventually and then you’ll need to include another animation library on top.
They’re both great libraries but they’re certainly not the one stop shop that Gsap (with expensive plugins) has proven to be (coming from someone that hates their docs and api’s).
Well, GSAP is quite a large library, along with its plugins. It is likely that most users who need basic animations do not need the heft that GSAP provides.
It's like the discussions about manga/manhua/manwha we keep return to, when they're all literally the same word with the same pronunciation and same meaning.
It's really interesting how much lore we've created in our forums that doesn't actually exist in the country of origin.
I believe 'literal meaning' and 'widely accepted use meaning' do always align, by definition of 'meaning'.
'Anime' in English means cartoon that is at least partially originates from Japan. Or, a less common usage is cartoon that has the style of the former cartoons (e.g. Avatar). 'Anime' in Japanese or in French can mean different things.
I'm guessing it's because of the author being French, as another commenter pointed out, but, it's plenty common for loan words to end up having a more specific or outright different meaning in a different language
We're talking French and Japanese here so let's look at one going the opposite way - the french avec to アベック/ abekku. In French it just means 'with' - eggs with ham, let's go to the beach with friends, whatever. In Japanese it is used to mean that you're romantically with someone, and is used as a noun to stand in for the word couple.
Or for a more specific usage example, high ball in English refers to any mixed drink where the base spirit is a lower volume of the drink than the mixer, e.g. gin and tonic, screwdriver, etc. In Japan a ハイボール / hai barru refers almost universally to whiskey and soda water. Of course other highball drinks are served there, but will tend to get a more specific name, such as a shochu highball being a チューハイ / chuhai.
It's more rare for this to happen with a chain of original word -> loan word -> loan word, but still something that happens - it's called 'reborrowing' a word. Another example of this would be the Chinese having reborrowed matcha to mean Japanese-style green tea.
It's not silly or wrong to utilize the word anime in the west to refer specifically to Japanese-style animation.
Japanese animation and comics are also particularly popular in France. 55% of all comics in France were manga in 2021, and it's the second biggest anime market outside of Japan. Biggest in Europe.
No, アニメ is literally short for アニメーション. "Anime" is a loanword derived from アニメ with a different meaning than アニメ because it doesn't make sense to borrow a word for "animation" since there already exists one.
Anyone recommend a good animation library to create 3D builds for watches as an example as I need it to be very detailed? I am about to start investigating and this is looking really interesting for the purpose.
I deduct points for 1.) not showing a noscript message when JS is disabled and 2.) using the name "anime" which is commonly used for, well, Japanese anime.
Some of the new features of V4 include:
* Improved performance: The library has been entirely rewritten with performance optimization and low memory usage in mind.
* New ESM Module first API: Import only what you need and benefit from improved tree shaking.
* Better timelines: New options for animation positioning, allowing looping animations in timelines and improved parameters inheritance.
* Additive animations: A new tween composition mode that lets you smoothly blend concurrently running animations.
* Variable framerate: Specify different framerates for each animation or set it globally.
* New callbacks: onTick, onLoop, onRender, etc.
* Value modifiers: A function to modify or alter the behavior of the numerical values of the animated property value before rendering.
* Animate from: Animation from a given value to the current target value.
* Improved documentation: A new design with enhanced animations demos and more in-depth explanations.
* Unit tests
And much more! I can't wait to share it with you!