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

• adrianvoica

  04/03/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

    04/03/2025

    > Julian (the author) is a genius.

    With proof!

    I have rarely been so impressed with a web tech.

    • Rendello

      04/04/2025

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

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

• wigster

  04/03/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

    04/03/2025

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

  • loxs

    04/04/2025

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

• qoez

  04/03/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

  04/04/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_

    04/05/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

      04/05/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_

        04/07/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

  04/03/2025

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

  • JulianGarnier

    04/04/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

      04/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

      04/05/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

      04/04/2025

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

      • JulianGarnier

        04/05/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

          04/09/2025

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

          • JulianGarnier

            04/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

      04/04/2025

      Don’t want to sound repetitive, but yes

    • wishinghand

      04/05/2025

      I’d love to see that.

    • DirkH

      04/04/2025

      Most certainly yes

    • firefoxd

      04/04/2025

      Double yes

    • bhattisatish

      04/04/2025

      Oh yes!

    • TheTaytay

      04/04/2025

      Literally what I came here to find! Incredible work!

  • chilmers

    04/03/2025

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

• ksec

  04/05/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

  04/04/2025

  Does it provide fewer footguns for less experienced devs though?

• ryandrake

  04/03/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

    04/03/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

      04/04/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

    04/03/2025

    False. Let the web be fun again

  • derac

    04/03/2025

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

  • johnsanders

    04/03/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

    04/03/2025

    Animation isn't really "playing media".

  • jonwinstanley

    04/03/2025

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

    • evilduck

      04/04/2025

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

      • dalmo3

        04/04/2025

        AnimeNoJs

    • hoc

      04/03/2025

      That missing Playdate phone accessory.

    • throwaway290

      04/04/2025

      not use animation in the first place :)

      • hydrolox

        04/05/2025

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

        • throwaway290

          04/05/2025

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

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

  04/04/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!

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.

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

• albedoa

  04/03/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

    04/04/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

  04/04/2025

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

• jonwinstanley

  04/03/2025

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

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

  04/04/2025

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

• graypegg

  04/04/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

    04/04/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.

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

• Washuu

  04/03/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

  04/03/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

  04/03/2025

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

  • thih9

    04/03/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

    04/03/2025

    Most likely due to iOS lockdown mode disabling WebGL rendering.

    • Arnavion

      04/03/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.

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

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

  04/04/2025

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

• chrismorgan

  04/04/2025

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

  • makeworld

    04/04/2025

    Not seeing this with 137.

    • chrismorgan

      04/05/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

        04/05/2025

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

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.

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

  04/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

  04/04/2025

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

• areeh

  04/05/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

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 )

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.

This works really well on the less conventional android browsers I use. Kudos to them, says good things about the library.

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.

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 :(

• bleuarff

  04/03/2025

  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.

  • XCSme

    04/03/2025

    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.

Anyone remembers DHMTL from Internet Explorer 4.0? From that - to this. What an evolution of web technologies.

• ksec

  04/05/2025

  Yes and we still haven't perfected the idea of DHTML.

• manx

  04/03/2025

  Haha, yes. Ist was a great time. document.all etc

• philsnow

  04/03/2025

  I was just working on a "web app" for personal use yesterday where I'm doing document.getElementById and so forth. It still works ¯\_(ツ)_/¯

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.

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.

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.

• SwiftyBug

  04/04/2025

  There's nothing unconventional about Microsoft Edge. It's pretty much Chrome.

• spartanatreyu

  04/03/2025

  What GPU do you have?

  • kilolympus

    04/04/2025

    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.

    • spartanatreyu

      04/07/2025

      Youtube would be playing videos which tend to run on GPUs.

      But just because you have hardware accelerated videos doesn't mean that everything in your browser is hardware accelerated.

      I'd recommend checking out "edge://flags" in your browser, then searching for "canvas" and see if hardware acceleration is enabled.

These docs are a work of art themselves, fantastic.

This looks amazing, is there a plugin to convert CAD parts for use like this? Exploding part views in this style would look so fantastic.

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!

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 :)

How does it compare to Motion ?

• dkersten

  04/03/2025

  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!

  • xico

    04/03/2025

    The first page in the documentation, Getting Started, gives a React sample: https://animejs.com/documentation/getting-started/using-with...

    • dkersten

      04/03/2025

      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)

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.

The animations in the docs page is crazy informative, interactive and fluid.

This runs surprisingly very smoothly even on my phone's browser.

This looks to be rendered in real time. I feel this kind of 3d animation would be difficult for me to achieve in blender on my PC.

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.

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>

Wow, this is incredibly laggy on Ubuntu Firefox...

I'm interested in creating animated technical diagrams. I'm looking for something high level that would allow rapid progress on prototyping a diagram. Perhaps vaguely analogous to manim, but either native JS or producing lightweight assets that can be hosted in a web page. Does anyone have any suggestions?

The one thing I'm missing is the brag page. Knowing GSAP I'd really like to see why it would be better. It doesn't have to be a fair comparison. Greensock can then say why they'd still be better. But as we do have options it would be nice to see where they match and where they differ.

• braebo

  04/04/2025

  If you read the source of both and spend 5 minutes on the issues of each and you will see that GSAP is a dated turd with more layers of cruft than photoshop and they still can’t do ESM or Typescript right even though they charge money for important features.

  AnimeJS is S-tier, up there with Pixi in quality, albeit smaller scope. V3 was a bit rough but v4 has been baking for a long time.

  The performance, code quality, ease of use, size, everything is worse in GSAP.

• numa7numa7

  04/04/2025

  And Pixi

I love how CSS Transforms are so efficient. This is a great lightweight alternative over GSAP.

Whomever designed that interactive landing page animation deserves some kind of Nobel prize.

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

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.

• spartanatreyu

  04/03/2025

  What does your network tab in the browser's dev tools show?

  • true_blue

    04/03/2025

    just a bunch of status 200 GET requests. a few are scripts, but mostly just images

    • spartanatreyu

      04/07/2025

      any errors?

• Hackbraten

  04/04/2025

  Same here on Firefox 128 ESR.

  • spartanatreyu

    04/07/2025

    Works perfectly in Firefox 137

    • LargoLasskhyfv

      04/07/2025

      Same for Cachy(weird mix of some of Librewolf and other patches), currently at 136 with uBO.

Are there authoring tools available, as with Lottie, or is it code-only?

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.

I love how breaking changes in the latest version are shown as diffs.

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.

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.

Are today's LLMs capable of writing code using these animation libraries? Could you replicate the landing page from its description, for example?

Are there any example projects built with this?

Completely black for me, FF on Windows.

• rk06

  04/04/2025

  Probably you have blocked webgl. Or something else. It loads for me, and I am also on Firefox on windows 11

I can feel the rotary dials tick on my mouse scrollwheel :-)

How was the model on the homepage created?

Finally. AnimeJS is such an amazing project, congratulations on the release.

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.

This might just be the thing that makes me seriously learn js

Looks cool. Os there any comparison with Green Sock?

Awesome landing page

Amazing homepage, congratz!

Very cool presentation page!

This cartoon show is almost like a web page!

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

The web is powerful.

Why not use GSAP?

It's showtime!

• billconan

  04/03/2025

  I'm amazed by the landing page.

  • ayhanfuat

    04/03/2025

    The whole documentation is so slick.

this felt shockingly smooth, what a great job!

This is beautiful!

This is so cool.

Eh, that's cute.

scrolls down

Wow. Okay.

no bad programmers

No anime here :(

this is chef's kiss

[flagged]

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).

• SeanAnderson

  04/04/2025

  This has nothing to do with internet connection and everything to do with hardware accelerated graphics.

  • notepad0x90

    04/04/2025

    I understand that, I meant they made the choice to use power and resources on the client end when internet bandwidth is abundant and they can utilize server resources for cpu intensive workload. Design choices such as these are exclude anyone who can't afford decent hardware and are inefficient in terms of power/energy usage.

    • SeanAnderson

      04/04/2025

      If they made the opposite choice then people would argue that they're not prioritizing bandwidth for those with poor internet connections like those living in rural areas or third-world countries. My gut says it's much more likely that clients have access to a discrete GPU than they do to broadband Internet. I also do not believe it would be possible to deliver the experience they're shipping with pre-rendered assets shipped over the wire, or, at the very least, I can't readily conceptualize how that would be implemented.

      I feel it's totally within scope for an animation-focused library to expect clients to have GPU hardware acceleration. The fact you're running in an isolated environment, and haven't configured it to be able to use your host machine's GPU (which is possible!), feels niche enough to me to write off.

      • notepad0x90

        04/04/2025

        I can only speak from my experience, and it is bad. If there are enough people that like this, then of course this should be a good library to use. but I'm just expressing my experience and feedback that I usually don't expose my gpu and cheaper hardware has less gpu power. GPU also uses a lot of energy (did everyone stop caring about that?). Browsers are already using too much power. I've seen other services like netflix vs prime as I mentioned earlier where I'm getting the same bandwidth utilization but less performance because someone at netflix decided to not care about cpu/gpu usage. I'm just asking for devs to be considerate unless the target audience is clearly people who have lots of gpu and don't care about energy usage (like graphics editors,vfx workers,etc..)