Anime.js – A lightweight JavaScript animation library
animejs.com
animejs.com
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!
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
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.
Is there any way to alpha/beta test for v4?
Would this be something that interests you?
The upcoming documentation for V4 has been completely rewritten with up to date JavaScript.
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 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.
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.
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.
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.
After that is installed, a new "Cycle Windows" button will appear: https://shots.panaitiu.com/klbRwgTG
The addon will also assign the Right Option key for focusing specific windows of the focused app, by letter: https://shots.panaitiu.com/j9cgRP9C
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.
SetTitleMatchMode, 2
#c::
IfWinExist, Google Chrome
IfWinActive
WinMinimize
else
Winactivate
else
run,"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe"
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.
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>
So how is anime.js obsolete?
the optional "lib" is just aliases to make vanilla js less verbose.
await is only used to build the non-blocking timeline: Think keyframes, not frames.
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.
Because `await setStyle` ain't it.
i'm so f#####g done with web dev.
You can do most things natively, if you have the time and luxury of reinventing the wheel.
https://developer.mozilla.org/en-US/docs/Web/API/window/requ...
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
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.
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.
https://greensock.com/docs/v3/GSAP/Timeline
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?
https://rive.app/use-cases https://rive.app/blog/rive-as-a-lottie-alternative
https://i.kym-cdn.com/photos/images/original/002/515/832/ee7...
Once this lands stable in all browser we can say goodbye to JS library animations (rightly so since they block the main thread).
1. https://webcache.googleusercontent.com/search?q=cache:Pa8-Oa...
Which is still needed for actual spring physicals vs the facsimile of linear() (which might often be enough!)
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.
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).
why are they better choices?
if I said Anime, would you think Tiny Toons, Family Guy, Toy Story, or Lion King? Or would you think DBZ, Akira, One Piece, etc?
It's really interesting how much lore we've created in our forums that doesn't actually exist in the country of origin.
'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.
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.
Disclaimer: I work on this :)
anything new here lately?