AnimeJs v4 Is Here - Hacker News

Posted by adrianvoica 4/3/2025

973 points | 155 comments

jacobgkau 4/3/2025|

Scrolling through that landing page felt a lot smoother & snappier than I would've expected for a page looking like that.

adrianvoica 4/3/2025||

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 4/3/2025||

> Julian (the author) is a genius.

With proof!

I have rarely been so impressed with a web tech.

Rendello 4/4/2025||

It reminds me how I felt when I first saw the recursive GoL:

https://oimo.io/works/life/

wigster 4/3/2025|||

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 4/3/2025|||

Yes - exactly. If they were that smooth and looked that good, I'd like more of them. So creative.

loxs 4/4/2025|||

Yeah, this is the one place where doing it like this is 100% appropriate.

qoez 4/3/2025|||

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 4/4/2025|||

I don't even remember seeing such a fantastic landing page in long time. it makes you realise how bad others are.

andrei_says_ 4/5/2025||

I’m confused, is this sarcasm?

On a mobile device the page requires miles of scrolling to go through a few sentences while rotating around a meaningless graphic.

Signal to noise ratio is abysmal.

wishinghand 4/5/2025||

Maybe it displays oddly on your phone but all I’ve seen is effusive praise for how the landing page is constructed. The graphic is meaningless but the information around it is informative. The graphic itself is meant to inspire rather than inform.

andrei_says_ 4/7/2025||

Thank you this makes sense. I had to scroll a lot to see one sentence-long phrase to change into another and found this too demanding for the payoff.

The graphic was pretty but did not provide additional insight for me.

As for execution- could’ve been frame-by-frame scroll-driven animation as far as I’m concerned.

azemetre 4/3/2025|||

Do they explain how they made the landing page or share the code somewhere? I agree, it's stunning.

JulianGarnier 4/4/2025|||

Hey I'm the author of the lib, I'm thinking about making a course on how to re-create the landing page, would that be something you're interested in?

JulianGarnier 4/11/2025|||

It's decided, I'm making a course!

I'll explain how the new Anime.js website was created by recreating the entire landing page from scratch, while sharing all the animation tricks and techniques I've learned throughout the years.

You can join the waitlist here https://animejs.com/learn/

jeleh 4/5/2025||||

I would sign up for the course immediately!

What I would be particularly interested in: What is the creative process of turning an animation idea into code? Suppose I have an idea of what the animation should look like: What is the best way to approach the task of expressing the animation in code?

azemetre 4/4/2025||||

Yes please, is there a site or something that you have to collect emails for those interested?

JulianGarnier 4/5/2025||

You can leave your email in the footer of the landing page > https://animejs.com/#site-footer I'll set up a dedicated temporary page for the course soon. Thanks for the interest!

frainfreeze 4/9/2025||

FYI: The form is erroring with "Something went wrong. Please try again later."

JulianGarnier 4/11/2025||

Sorry about that. I had lots of issues with this form... I added a dedicated page for joining the wait list for the course I'm making about recreating the landing page. You can join here: https://animejs.com/learn/ (this signup form should work, otherwise you can email me directly at the email address listed below it)

yosef123 4/4/2025||||

Don’t want to sound repetitive, but yes

wishinghand 4/5/2025||||

I’d love to see that.

DirkH 4/4/2025||||

Most certainly yes

firefoxd 4/4/2025||||

Double yes

bhattisatish 4/4/2025||||

Oh yes!

TheTaytay 4/4/2025|||

Literally what I came here to find! Incredible work!

chilmers 4/3/2025|||

There is a gh-pages branch, but it is generated from a private repo: https://github.com/juliangarnier/anime/tree/gh-pages

ksec 4/5/2025|||

On what machine is that on?

I wish these type of page animation should be rendering to 120fps with less than 20% CPU spike for seconds and no warming up of CPU / GPU on a modern 2025 machine.

Unfortunately we are still not there yet. If we achieve that the web would be much more interesting. Brining back memories of Macromedia Flash.

aitchnyu 4/4/2025|||

Does it provide fewer footguns for less experienced devs though?

ryandrake 4/3/2025||

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 4/3/2025|||

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.

JulianGarnier 4/4/2025||

Hey I'm the author of the lib, exactly, I don't really "highjack" the body scroll, I'm only controlling the background animations with it, while keeping most of the body content scroll naturally with the page.

mcluck 4/3/2025||||

False. Let the web be fun again

derac 4/3/2025||||

For most websites, sure. For this website? It makes sense, it's a great demo for the product.

johnsanders 4/3/2025||||

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.

robertlagrant 4/3/2025||||

Animation isn't really "playing media".

jonwinstanley 4/3/2025|||

So what would you suggest to use to move the animation forward?

evilduck 4/4/2025|||

Submitting a form repeatedly by hammering enter and having a new HTML fragment rendered on the server deliver the next frame, obviously.

dalmo3 4/4/2025||

AnimeNoJs

hoc 4/3/2025||||

That missing Playdate phone accessory.

throwaway290 4/4/2025|||

not use animation in the first place :)

hydrolox 4/5/2025||

isn't the point that it's an animation library showcasing what's possible?

throwaway290 4/5/2025||

good point, I read it as about websites in general but in this case why not.

rsingla 4/3/2025||

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.

JulianGarnier 4/4/2025|

Hey I'm the author of the lib, I think this is my favorite comment about the landing page I read so far. I've started learning web development with Flash in the 2000s, so this hits home. Thank you!

pentagrama 4/3/2025||

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.

qgin 4/3/2025||

This is the first time I haven’t hated scroll hijacking. That was actually really smooth.

albedoa 4/3/2025||

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.

tiltowait 4/4/2025||

It definitely feels “heavy” on mobile Safari. The animation is buttery smooth, but the little space station thing doesn’t rotate as quickly as I feel it should based on my scroll velocity.

I feel like I’m alone in not liking it. The technical accomplishment is undeniably impressive, and the author deserves serious kudos for that, but I really wish websites wouldn’t do this sort of thing. It’s far less usable than just having some static tables.

cess11 4/4/2025|||

I think they just measure the scrolling and drive the animations with it. Maybe that's what you mean by hijacking.

jonwinstanley 4/3/2025||

I’m not sure that was scroll hijacked. It all moved at the right speed

h2zizzle 4/4/2025||

Still waiting for the WYSIWYG GUI-base authoring tool for a web animation API. You know what artists - animators - generally don't like? Wading through docs and code to spin a square. It's been about a decade since the average of the various watersheds in the slow death of Flash, and we still don't have a replacement.

another_kel 4/4/2025||

Have you tried https://rive.app/ ?

graypegg 4/4/2025||

I honestly think it's https://godotengine.org/features/, though I do think the GUI-only WYSIWYG creation flow hits a brick wall a little earlier than Flash did. Lots of content being made with it though!

https://docs.godotengine.org/en/stable/tutorials/animation/i...

h2zizzle 4/4/2025||

If you're being honest with yourself, not even close. Maybe if you Frankenstein Blender for asset creation and Godot/Unity for scripting, but it would be just as much of a monster as Shelley's.

thih9 4/3/2025||

I like that I can grab and drag the browser’s scroll indicator and the animation updates seamlessly (safari mobile).

Washuu 4/3/2025||

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 4/3/2025|||

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 4/3/2025||

I get a black screen with a scroll bar. Lockdown mode on iOS.

thih9 4/3/2025|||

> 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

UncleBen 4/3/2025|||

Most likely due to iOS lockdown mode disabling WebGL rendering.

Arnavion 4/3/2025||

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 4/3/2025||

I thought the main site was amazing, then I saw the docs. Absolutely amazing work. Well done. Extremely excited to try out WAAPI.

solid_fuel 4/3/2025||

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 4/4/2025||

I can confirm. It's not a 100% occurrence, but browsing through that section ends up crashing the tab.

chrismorgan 4/4/2025||

Ooh, fun, reproducible on Firefox for Android. Crash signature [@ JS::Heap<T>::exposeToActiveJS ].

makeworld 4/4/2025||

Not seeing this with 137.

chrismorgan 4/5/2025||

I can reproduce it in 137 stable on Android and 138 Nightly on Linux from 2025-03-10 (I’m not normally so far out of date, there was a specific reason this time), but it requires the uBlock Origin extension to be enabled.

makeworld 4/5/2025||

Huh I have uBlock Origin enabled on my Android as well.

steve_adams_86 4/3/2025||

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.

skerit 4/4/2025|

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.

lazyhummingbird 4/16/2025||

You're on a PC aren't you? I say this not as a "ew PC" (I am too), but truly to ask with some underlying suspicion. I am on a PC too, and these sites are dually either fine or awful depending on whether I'm using a mac or not.

dominicrose 4/4/2025|||

Didn't even see we could scroll until I read this. Clicked on examples instead.

areeh 4/5/2025||

Isn't it more about the demo of what you can build than the paragraph? I feel like the text would only give a small amount of the information this demo gives

More comments...