AnimeJs v4 Is Here
732 points
19 hours ago
| 54 comments
| animejs.com
| HN
jacobgkau
16 hours ago
[-]
Scrolling through that landing page felt a lot smoother & snappier than I would've expected for a page looking like that.
reply
adrianvoica
16 hours ago
[-]
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!
reply
MrMcCall
13 hours ago
[-]
> Julian (the author) is a genius.

With proof!

I have rarely been so impressed with a web tech.

reply
wigster
16 hours ago
[-]
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.
reply
robertlagrant
13 hours ago
[-]
Yes - exactly. If they were that smooth and looked that good, I'd like more of them. So creative.
reply
qoez
14 hours ago
[-]
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)
reply
rk06
6 hours ago
[-]
I don't even remember seeing such a fantastic landing page in long time. it makes you realise how bad others are.
reply
azemetre
13 hours ago
[-]
Do they explain how they made the landing page or share the code somewhere? I agree, it's stunning.
reply
chilmers
11 hours ago
[-]
There is a gh-pages branch, but it is generated from a private repo: https://github.com/juliangarnier/anime/tree/gh-pages
reply
aitchnyu
3 hours ago
[-]
Does it provide fewer footguns for less experienced devs though?
reply
ryandrake
13 hours ago
[-]
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.
reply
jacobgkau
12 hours ago
[-]
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.

reply
mcluck
13 hours ago
[-]
False. Let the web be fun again
reply
johnsanders
11 hours ago
[-]
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.
reply
robertlagrant
13 hours ago
[-]
Animation isn't really "playing media".
reply
derac
12 hours ago
[-]
For most websites, sure. For this website? It makes sense, it's a great demo for the product.
reply
jonwinstanley
12 hours ago
[-]
So what would you suggest to use to move the animation forward?
reply
evilduck
9 hours ago
[-]
Submitting a form repeatedly by hammering enter and having a new HTML fragment rendered on the server deliver the next frame, obviously.
reply
dalmo3
6 hours ago
[-]
AnimeNoJs
reply
hoc
10 hours ago
[-]
That missing Playdate phone accessory.
reply
skerit
2 hours ago
[-]
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.

reply
dominicrose
1 hour ago
[-]
Didn't even see we could scroll until I read this. Clicked on examples instead.
reply
pentagrama
16 hours ago
[-]
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.
reply
rsingla
13 hours ago
[-]
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.
reply
qgin
15 hours ago
[-]
This is the first time I haven’t hated scroll hijacking. That was actually really smooth.
reply
albedoa
14 hours ago
[-]
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.

reply
jonwinstanley
12 hours ago
[-]
I’m not sure that was scroll hijacked. It all moved at the right speed
reply
cess11
1 hour ago
[-]
I think they just measure the scrolling and drive the animations with it. Maybe that's what you mean by hijacking.
reply
solid_fuel
12 hours ago
[-]
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.
reply
vvillena
2 hours ago
[-]
I can confirm. It's not a 100% occurrence, but browsing through that section ends up crashing the tab.
reply
chrismorgan
6 hours ago
[-]
Ooh, fun, reproducible on Firefox for Android. Crash signature [@ JS::Heap<T>::exposeToActiveJS ].
reply
thih9
17 hours ago
[-]
I like that I can grab and drag the browser’s scroll indicator and the animation updates seamlessly (safari mobile).
reply
Washuu
16 hours ago
[-]
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.
reply
bbx
10 hours ago
[-]
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.

reply
captn3m0
17 hours ago
[-]
I get a black screen with a scroll bar. Lockdown mode on iOS.
reply
thih9
16 hours ago
[-]
> 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.

https://support.apple.com/en-us/105120

reply
UncleBen
16 hours ago
[-]
Most likely due to iOS lockdown mode disabling WebGL rendering.
reply
Arnavion
16 hours ago
[-]
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.

reply
wwdx
38 minutes ago
[-]
Are there any example projects built with this?
reply
donatj
50 minutes ago
[-]
Ooh, this reminds me a lot of MooTools' optional FX package back in the early aughts. I've still got it in a couple places because it's been difficult to replace.
reply
Nijikokun
16 hours ago
[-]
I thought the main site was amazing, then I saw the docs. Absolutely amazing work. Well done. Extremely excited to try out WAAPI.
reply
kamranjon
2 hours ago
[-]
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.

reply
steve_adams_86
16 hours ago
[-]
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.

reply
yamihere
9 hours ago
[-]
Just joining in with the “Wow, this is amazing” crowd. I usually detest websites that dink with scrolling to animate content in and out of view, except for well designed long form narrative content; but this is slick.

A challenge to all the “10x-ed my productivity” LLManiacs: how long to recreate this landing page using nothing but prompts (and how much $$ for a how-to course :)

A challenge to the “the’re gonna take our jobs” LLMongers: git gud, its possible. this is living proof.

(yes, i did just want to post those portmanteaus, even though it was all ChatGPT: https://pastebin.com/zrsj6DcB )

reply
monetus
16 hours ago
[-]
This works really well on the less conventional android browsers I use. Kudos to them, says good things about the library.
reply
majora2007
17 hours ago
[-]
This is insane. API looks great, landing page is the best thing I've ever seen and just so feature rich. I wish I had a way to use this in my primary application.
reply
flufluflufluffy
15 hours ago
[-]
This is INCREDIBLE. What! I could spend hours just playing around with the hecking documentation pages. EVERYTHING is so well thought out AND presented. I'm in awe.
reply
XCSme
14 hours ago
[-]
The landing page is amazing!

The only issue I found with it was when checking the responsive layout example, I tried to resize my browser window and then the scroll was reset to top :(

reply
bleuarff
14 hours ago
[-]
Handling resize is a different beast than being responsive. Working for every viewport dimension under the sun is not the same thing as gracefully handling an animation while the viewport size changes - the latter is much more challenging.
reply
XCSme
13 hours ago
[-]
I agree, I was not even expecting it to handle the resize well. I just thought the landing page wanted me to resize my window to test responsiveness (before I noticed that the animation itself changes the content area size).

That being said, when resizing a window, the scrollbar should not reset/jump to top. At the very least, it should revert to what it was when going back to full size.

reply
wg0
15 hours ago
[-]
Anyone remembers DHMTL from Internet Explorer 4.0? From that - to this. What an evolution of web technologies.
reply
manx
13 hours ago
[-]
Haha, yes. Ist was a great time. document.all etc
reply
philsnow
11 hours ago
[-]
I was just working on a "web app" for personal use yesterday where I'm doing document.getElementById and so forth. It still works ¯\_(ツ)_/¯
reply
FlorianRappl
11 hours ago
[-]
This is why I love HN. Not sure if I would have gotten the memo... Impressive tech, useful lib, super awesome landing page. Just blown away!
reply
skeptrune
7 hours ago
[-]
I feel like web tech is getting a lot more mature and reliable. Just my personal vibe-read, but JS libs on the whole seem to be getting to be consistently hitting higher quality bars.
reply
iamunr
16 hours ago
[-]
These docs are a work of art themselves, fantastic.
reply
drschwabe
12 hours ago
[-]
Bravo, been looking forward to this but AnimeJs v3 has just been so solid for so long honestly you did amazing on v3 that v4 is just icing on top; excited to try this out on my next project.

async/await + animation (ie- with AnimeJS) is highly underrated.

And mad props for skipping the now dying trend of refactoring entire codebase to TypeScript :)

reply
kilolympus
11 hours ago
[-]
It could just be me running a CPU that's too old or an unconventional browser (Microsoft Edge), but the website is extremely laggy (less than 1 update per second) and the tab immediately starts using 80% of my CPU with fans blaring. Got an 8th gen Intel i7 if it matters.
reply
spartanatreyu
10 hours ago
[-]
What GPU do you have?
reply
kilolympus
1 hour ago
[-]
It's a laptop GPU - there's the integrated Intel UHD Graphics 620 card and the dedicated NVIDIA GeForce MX150. Both are pretty old (6-7 years?) but are capable of running most 3D games so I was a bit surprised.

EDIT: P.S. What might help debug is that I have hardware acceleration enabled in the browser, but the GPU is not doing any work on the animejs homepage. For e.g. YouTube, the GPU does a lot of work so I've verified hardware accel works.

reply
maelito
14 hours ago
[-]
How does it compare to Motion ?
reply
dkersten
14 hours ago
[-]
That's what I came here to ask too. This looks wonderful, but I'm already using Motion quite a bit. I'm also using React and am unsure how well Anime.js pairs with that while Motion has a first party react library.

In any case, like everyone else here, I'm very impressed with OP's site and documentation. Very slick!

reply
xico
13 hours ago
[-]
The first page in the documentation, Getting Started, gives a React sample: https://animejs.com/documentation/getting-started/using-with...
reply
dkersten
11 hours ago
[-]
Ah, I looked at the examples but I guess I missed this. Thanks!

So it basically works outside of react land — you can animate your component but it’s applied after react renders it. It’s nice to see an example and that it works, but I suppose it does mean there are certain things it’s unable to do, such as animating on component removal (Motion does this by adding a wrapper component that detects when its children are removed, I suppose it’s not something you can achieve without special react specific support)

reply
ViscountPenguin
4 hours ago
[-]
Wow, this is incredibly laggy on Ubuntu Firefox...
reply
esafak
5 hours ago
[-]
Are today's LLMs capable of writing code using these animation libraries? Could you replicate the landing page from its description, for example?
reply
mrbluecoat
5 hours ago
[-]
I stared at the homepage on my smartphone for a while and thought "That's really quite good." Then I started scrolling...

<mind>me</blown>

reply
true_blue
11 hours ago
[-]
the website is just a blank black page for me no matter how long I wait. clearly that's not what it's supposed to be going by the other comments, so that's a bit disappointing.
reply
Hackbraten
4 hours ago
[-]
Same here on Firefox 128 ESR.
reply
spartanatreyu
10 hours ago
[-]
What does your network tab in the browser's dev tools show?
reply
true_blue
10 hours ago
[-]
just a bunch of status 200 GET requests. a few are scripts, but mostly just images
reply
cess11
1 hour ago
[-]
Quite impressive, and the showcase of breaking changes on the git repo gives the impression this release comes with a much nicer API than the previous one.
reply
A_Stefan
15 hours ago
[-]
I remember using the same library few years ago for a stagger effect. Glad to see it's still alive and doing even better. The intro experience was beautifully crafted. It has me convinced to add an use to my projects
reply
pacomerh
16 hours ago
[-]
I love how CSS Transforms are so efficient. This is a great lightweight alternative over GSAP.
reply
wilfredk
15 hours ago
[-]
The animations in the docs page is crazy informative, interactive and fluid.
reply
Tade0
15 hours ago
[-]
I love how breaking changes in the latest version are shown as diffs.
reply
iamsaitam
4 hours ago
[-]
Amazing homepage, congratz!
reply
rgovostes
17 hours ago
[-]
Are there authoring tools available, as with Lottie, or is it code-only?
reply
Agree2468
13 hours ago
[-]
Completely black for me, FF on Windows.
reply
leptons
16 hours ago
[-]
Love that the source is in Javascript, with type annotations. The compiled files in the /lib folder are also much smaller than I expected. I will likely be using this.
reply
card_zero
5 hours ago
[-]
This cartoon show is almost like a web page!

Incidentally it crashed the browser the second time I looked at it.

reply
jbverschoor
15 hours ago
[-]
I can feel the rotary dials tick on my mouse scrollwheel :-)

How was the model on the homepage created?

reply
melodyogonna
15 hours ago
[-]
Finally. AnimeJS is such an amazing project, congratulations on the release.
reply
p2hari
15 hours ago
[-]
just as others mentioned, the whole landing page and the docs page is really nice work. It was loading well and the final scroll to bottom :). Thanks for the library and the work put in.
reply
rocketvole
14 hours ago
[-]
This might just be the thing that makes me seriously learn js
reply
revskill
4 hours ago
[-]
The web is powerful.
reply
nicman23
3 hours ago
[-]
no bad programmers
reply
anon1094
16 hours ago
[-]
Awesome landing page
reply
yakshaving_jgt
15 hours ago
[-]
Whomever designed that interactive landing page animation deserves some kind of Nobel prize.
reply
EQYV
12 hours ago
[-]
This is beautiful!
reply
yieldcrv
4 hours ago
[-]
this is amazing, in my experience I haven't found much utility for visualization heavy UX. Like professionally.

I have spun up landing pages and things for things I've monetized. The crypto crowd loves it. But I don't put that stuff on my resume

What do you all use snazzy UX for?

I do find creating and expressing myself this way to be fulfilling though. Which is good enough, I just never considered myself doing it for the art and art communities. Websites aren’t really consumed that way.

reply
adrianvoica
19 hours ago
[-]
It's showtime!
reply
billconan
19 hours ago
[-]
I'm amazed by the landing page.
reply
ayhanfuat
18 hours ago
[-]
The whole documentation is so slick.
reply
matt3210
7 hours ago
[-]
No anime here :(
reply
JusticeJuice
17 hours ago
[-]
This is so cool.
reply
shmerl
14 hours ago
[-]
Very cool presentation page!
reply
cynicalpeace
16 hours ago
[-]
this is chef's kiss
reply
notepad0x90
4 hours ago
[-]
Devs, please don't use this. it is unusable for me when browsing in a VM with a pretty snappy internet connection. The only other site that has compute/graphics resource issues for me is Netflix (its competition Prime, Youtube,etc.. have no issues, so i can only presume bad software dev decisions).
reply
SeanAnderson
4 hours ago
[-]
This has nothing to do with internet connection and everything to do with hardware accelerated graphics.
reply