[HN Gopher] AnimeJs v4 Is Here
___________________________________________________________________
AnimeJs v4 Is Here
Author : adrianvoica
Score : 857 points
Date : 2025-04-03 14:47 UTC (1 days ago)
(HTM) web link (animejs.com)
(TXT) w3m dump (animejs.com)
| adrianvoica wrote:
| It's showtime!
| billconan wrote:
| I'm amazed by the landing page.
| ayhanfuat wrote:
| The whole documentation is so slick.
| JusticeJuice wrote:
| This is so cool.
| rgovostes wrote:
| Are there authoring tools available, as with Lottie, or is it
| code-only?
| thih9 wrote:
| I like that I can grab and drag the browser's scroll indicator
| and the animation updates seamlessly (safari mobile).
| captn3m0 wrote:
| I get a black screen with a scroll bar. Lockdown mode on iOS.
| UncleBen wrote:
| Most likely due to iOS lockdown mode disabling WebGL
| rendering.
| Arnavion wrote:
| 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.
| thih9 wrote:
| > 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
| Washuu wrote:
| 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 wrote:
| 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.
| majora2007 wrote:
| 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.
| anon1094 wrote:
| Awesome landing page
| jacobgkau wrote:
| Scrolling through that landing page felt a lot smoother &
| snappier than I would've expected for a page looking like that.
| adrianvoica wrote:
| 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 wrote:
| > Julian (the author) is a genius.
|
| With proof!
|
| I have rarely been so impressed with a web tech.
| Rendello wrote:
| It reminds me how I felt when I first saw the recursive
| GoL:
|
| https://oimo.io/works/life/
| wigster wrote:
| 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 wrote:
| Yes - exactly. If they were that smooth and looked that good,
| I'd like more of them. So creative.
| loxs wrote:
| Yeah, this is the one place where doing it like this is 100%
| appropriate.
| qoez wrote:
| 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)
| ryandrake wrote:
| 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.
| mcluck wrote:
| False. Let the web be fun again
| robertlagrant wrote:
| Animation isn't really "playing media".
| jacobgkau wrote:
| 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 wrote:
| 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.
| jonwinstanley wrote:
| So what would you suggest to use to move the animation
| forward?
| hoc wrote:
| That missing Playdate phone accessory.
| evilduck wrote:
| Submitting a form repeatedly by hammering enter and having
| a new HTML fragment rendered on the server deliver the next
| frame, obviously.
| dalmo3 wrote:
| AnimeNoJs
| throwaway290 wrote:
| not use animation in the first place :)
| derac wrote:
| For most websites, sure. For this website? It makes sense,
| it's a great demo for the product.
| johnsanders wrote:
| 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.
| azemetre wrote:
| Do they explain how they made the landing page or share the
| code somewhere? I agree, it's stunning.
| chilmers wrote:
| There is a gh-pages branch, but it is generated from a
| private repo: https://github.com/juliangarnier/anime/tree/gh-
| pages
| JulianGarnier wrote:
| 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?
| bhattisatish wrote:
| Oh yes!
| firefoxd wrote:
| Double yes
| DirkH wrote:
| Most certainly yes
| TheTaytay wrote:
| Literally what I came here to find! Incredible work!
| azemetre wrote:
| Yes please, is there a site or something that you have to
| collect emails for those interested?
| yosef123 wrote:
| Don't want to sound repetitive, but yes
| rk06 wrote:
| I don't even remember seeing such a fantastic landing page in
| long time. it makes you realise how bad others are.
| aitchnyu wrote:
| Does it provide fewer footguns for less experienced devs
| though?
| leptons wrote:
| 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.
| pacomerh wrote:
| I love how CSS Transforms are so efficient. This is a great
| lightweight alternative over GSAP.
| steve_adams_86 wrote:
| 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.
| pentagrama wrote:
| 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.
| monetus wrote:
| This works really well on the less conventional android browsers
| I use. Kudos to them, says good things about the library.
| iamunr wrote:
| These docs are a work of art themselves, fantastic.
| cynicalpeace wrote:
| this is chef's kiss
| Nijikokun wrote:
| I thought the main site was amazing, then I saw the docs.
| Absolutely amazing work. Well done. Extremely excited to try out
| WAAPI.
| flufluflufluffy wrote:
| 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.
| yakshaving_jgt wrote:
| Whomever designed that interactive landing page animation
| deserves some kind of Nobel prize.
| melodyogonna wrote:
| Finally. AnimeJS is such an amazing project, congratulations on
| the release.
| Tade0 wrote:
| I love how breaking changes in the latest version are shown as
| diffs.
| jbverschoor wrote:
| I can feel the rotary dials tick on my mouse scrollwheel :-)
|
| How was the model on the homepage created?
| wilfredk wrote:
| The animations in the docs page is crazy informative, interactive
| and fluid.
| wg0 wrote:
| Anyone remembers DHMTL from Internet Explorer 4.0? From that - to
| this. What an evolution of web technologies.
| manx wrote:
| Haha, yes. Ist was a great time. document.all etc
| philsnow wrote:
| I was just working on a "web app" for personal use yesterday
| where I'm doing document.getElementById and so forth. It still
| works -\\_(tsu)_/-
| p2hari wrote:
| 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.
| A_Stefan wrote:
| 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
| qgin wrote:
| This is the first time I haven't hated scroll hijacking. That was
| actually really smooth.
| albedoa wrote:
| 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 wrote:
| 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.
| jonwinstanley wrote:
| I'm not sure that was scroll hijacked. It all moved at the
| right speed
| cess11 wrote:
| I think they just measure the scrolling and drive the
| animations with it. Maybe that's what you mean by hijacking.
| maelito wrote:
| How does it compare to Motion ?
| dkersten wrote:
| 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 wrote:
| The first page in the documentation, Getting Started, gives a
| React sample: https://animejs.com/documentation/getting-
| started/using-with...
| dkersten wrote:
| 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)
| XCSme wrote:
| 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 wrote:
| 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 wrote:
| 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.
| shmerl wrote:
| Very cool presentation page!
| rocketvole wrote:
| This might just be the thing that makes me seriously learn js
| rsingla wrote:
| 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 wrote:
| 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!
| Agree2468 wrote:
| Completely black for me, FF on Windows.
| rk06 wrote:
| Probably you have blocked webgl. Or something else. It loads
| for me, and I am also on Firefox on windows 11
| EQYV wrote:
| This is beautiful!
| drschwabe wrote:
| 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 :)
| solid_fuel wrote:
| 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.
| chrismorgan wrote:
| Ooh, fun, reproducible on Firefox for Android. Crash signature
| [@ JS::Heap<T>::exposeToActiveJS ].
| makeworld wrote:
| Not seeing this with 137.
| vvillena wrote:
| I can confirm. It's not a 100% occurrence, but browsing through
| that section ends up crashing the tab.
| kilolympus wrote:
| 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.
| spartanatreyu wrote:
| What GPU do you have?
| kilolympus wrote:
| 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.
| SwiftyBug wrote:
| There's nothing unconventional about Microsoft Edge. It's
| pretty much Chrome.
| true_blue wrote:
| 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 wrote:
| What does your network tab in the browser's dev tools show?
| true_blue wrote:
| just a bunch of status 200 GET requests. a few are scripts,
| but mostly just images
| Hackbraten wrote:
| Same here on Firefox 128 ESR.
| FlorianRappl wrote:
| 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!
| yamihere wrote:
| 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 )
| skeptrune wrote:
| 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.
| matt3210 wrote:
| No anime here :(
| mrbluecoat wrote:
| 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>
| card_zero wrote:
| This cartoon show is almost like a web page!
|
| Incidentally it crashed the browser the second time I looked at
| it.
| esafak wrote:
| Are today's LLMs capable of writing code using these animation
| libraries? Could you replicate the landing page from its
| description, for example?
| yieldcrv wrote:
| 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.
| notepad0x90 wrote:
| 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 wrote:
| This has nothing to do with internet connection and everything
| to do with hardware accelerated graphics.
| notepad0x90 wrote:
| 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 wrote:
| 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 wrote:
| 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..)
| revskill wrote:
| The web is powerful.
| iamsaitam wrote:
| Amazing homepage, congratz!
| ViscountPenguin wrote:
| Wow, this is incredibly laggy on Ubuntu Firefox...
| nicman23 wrote:
| no bad programmers
| skerit wrote:
| 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 wrote:
| Didn't even see we could scroll until I read this. Clicked on
| examples instead.
| kamranjon wrote:
| 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.
| cess11 wrote:
| 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.
| donatj wrote:
| 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.
| wwdx wrote:
| Are there any example projects built with this?
| photonthug wrote:
| 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.
| nedt wrote:
| 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.
| numa7numa7 wrote:
| And Pixi
| braebo wrote:
| 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.
| bobajeff wrote:
| 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.
| mfru wrote:
| this felt shockingly smooth, what a great job!
| Myrmornis wrote:
| 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?
| h2zizzle wrote:
| 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.
| graypegg wrote:
| 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 wrote:
| 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.
| another_kel wrote:
| Have you tried https://rive.app/ ?
| AlienRobot wrote:
| Eh, that's cute.
|
| _scrolls down_
|
| Wow. Okay.
| Mr_Eri_Atlov wrote:
| 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.
| terpimost wrote:
| Looks cool. Os there any comparison with Green Sock?
___________________________________________________________________
(page generated 2025-04-04 23:02 UTC)