AnimeJs v4 Is Here
107 comments
·April 3, 2025jacobgkau
adrianvoica
Julian (the author) is a genius. v4 has been in the making for some time, but, boy, is it worth the wait! I have used v3 (I am using it on my landing page and even built a small game engine with it), but this version is on a whole new level. Congrats to the author! Keep up the good work!
MrMcCall
> Julian (the author) is a genius.
With proof!
I have rarely been so impressed with a web tech.
wigster
yeah. i'm normally not a big fan of these scroll down and "shit-happens" sites, but that is VERY slick and cool. super nice.
robertlagrant
Yes - exactly. If they were that smooth and looked that good, I'd like more of them. So creative.
qoez
I think part of the trick is that each unit of scrolling takes you quite far down the animation sequence (so scrolling doesn't feel like a long effort)
rk06
I don't even remember seeing such a fantastic landing page in long time. it makes you realise how bad others are.
azemetre
Do they explain how they made the landing page or share the code somewhere? I agree, it's stunning.
chilmers
There is a gh-pages branch, but it is generated from a private repo: https://github.com/juliangarnier/anime/tree/gh-pages
aitchnyu
Does it provide fewer footguns for less experienced devs though?
ryandrake
It's clever, but honestly I don't care how smooth it is. Scrolling should simply scroll a view up or down a page. Not invoke animation. We already have established UX patterns for playing media, slowing it down, speeding it up, randomly seeking through it.
jacobgkau
Part of the smoothness here is that scrolling the text is 1:1 once you get down to the sections with colored headers. It demonstrates that it's possible to make a page look fancy like that without "breaking" your intuition of what scrolling "should be."
JS animations obviously don't take the place of video/audio media that you'd play/scrub through.
mcluck
False. Let the web be fun again
johnsanders
It's not so much about playing/slowing/speeding up an animation or video. It's about moving forward and backward through an "experience," as much as I dislike the overuse of that word. I'd suggest it's a natural evolution of the scroll behavior.
derac
For most websites, sure. For this website? It makes sense, it's a great demo for the product.
robertlagrant
Animation isn't really "playing media".
jonwinstanley
So what would you suggest to use to move the animation forward?
evilduck
Submitting a form repeatedly by hammering enter and having a new HTML fragment rendered on the server deliver the next frame, obviously.
hoc
That missing Playdate phone accessory.
skerit
Looks very nice!
Having said that: I severely hate content in this form, where you have to scroll like your life depends on it just to read a paragraph or two.
dominicrose
Didn't even see we could scroll until I read this. Clicked on examples instead.
pentagrama
Wow, that homepage was one of the more complex and layer filled interactive animations that I ever seen running so smoothly on a mobile browser. Those FPS feel like a Doom 2016 on a beefy PC.
rsingla
I cannot believe this is real, it was so well done. It felt like creativity of the internet from the early 2000s met the polished design standards of today.
null
qgin
This is the first time I haven’t hated scroll hijacking. That was actually really smooth.
albedoa
Part of why it is less offensive is it's not actually hijacking our scrolling: https://news.ycombinator.com/item?id=43572887
Scroll hijacking is when I try to scroll normally but the page overrides my distance and velocity.
jonwinstanley
I’m not sure that was scroll hijacked. It all moved at the right speed
cess11
I think they just measure the scrolling and drive the animations with it. Maybe that's what you mean by hijacking.
photonthug
Probably a dumb question but.. Is the 3d exploding diagram model of the engine here just a visual metaphor for a complex system working in sync with itself? Or actually created using the toolkit? I flipped through the API and everything appears to be lower-level animation support, but intro gives the impression that it's CAD-like.
solid_fuel
I love it, but... Going to this page https://animejs.com/documentation/scope/ with ublock origin enabled in my Firefox (136.0.3) immediately crashes the tab. Which certainly made for a funny experience right after scrolling through the very impressive intro animation.
vvillena
I can confirm. It's not a 100% occurrence, but browsing through that section ends up crashing the tab.
chrismorgan
Ooh, fun, reproducible on Firefox for Android. Crash signature [@ JS::Heap<T>::exposeToActiveJS ].
thih9
I like that I can grab and drag the browser’s scroll indicator and the animation updates seamlessly (safari mobile).
Washuu
It responds to the scrolling, leaving agency to the user, instead of hijacking scrolling, that steal agency from the user, that some web sites do. It's so much better of a solution and friendly to accessibility.
bbx
TIL you can grab the scroll bar on iOS!!
Thanks for this. Jumping to the bottom of a page was such a chore for me.
captn3m0
I get a black screen with a scroll bar. Lockdown mode on iOS.
thih9
> When Lockdown Mode is enabled, your device won’t function like it typically does. (…)
> Web browsing - Certain complex web technologies are blocked, which might cause some websites to load more slowly or not operate correctly.
UncleBen
Most likely due to iOS lockdown mode disabling WebGL rendering.
Arnavion
Same for me on desktop Linux Chromium (with and without incognito mode), and yes console prints WebGL errors:
> scripts.js?v=1:3820 THREE.WebGLRenderer: A WebGL context could not be created. Reason: Web page caused context loss and was blocked
> scripts.js?v=1:3820 THREE.WebGLRenderer: A WebGL context could not be created. Reason: Failed to create a WebGL2 context.
Nijikokun
I thought the main site was amazing, then I saw the docs. Absolutely amazing work. Well done. Extremely excited to try out WAAPI.
steve_adams_86
I can't speak to what it's like to actually work with this, but I really like the API design and docs. This feels really well thought out. Looking through the timer docs for example, it took just a minute or so to understand what the timer API can do and how to do it. This gives me a lot of confidence to try out the library.
As others have said, beautiful work on the lander. It looks and performs beautifully.
kamranjon
I was absolutely floored by the website, what a way to knock it out of the park.
I have never heard of this library before, but it’s going to stick in my head the next time I’m looking for a JS animation lib.
Definitely kinda highlights the importance of first impressions.
Scrolling through that landing page felt a lot smoother & snappier than I would've expected for a page looking like that.