April 3rd, 2025

AnimeJs v4 Is Here

Anime.js is a fast JavaScript animation engine with an intuitive API, supporting SVG animations, scroll synchronization, modular imports, and advanced utilities for staggering and draggable elements. It is free and well-documented.

Read original articleLink Icon
ExcitementFrustrationAdmiration
AnimeJs v4 Is Here

Anime.js is a versatile and fast JavaScript animation engine designed to enhance web animations through a single API. It offers an intuitive interface with features such as per property parameters, flexible keyframes, built-in easings, and enhanced transforms, allowing for smooth blending of CSS properties. The library includes a comprehensive SVG toolset for morphing shapes, drawing lines, and following motion paths. Additionally, the Scroll Observer API enables synchronization of animations with scroll events, while the Stagger utility function facilitates the creation of complex effects. The Draggable API allows for interactive animations, and the Timeline API helps orchestrate sequences and manage callbacks effectively. Anime.js is lightweight, with a modular design that allows users to import only the necessary components, keeping bundle sizes small. The library is free and supported by sponsors, and it provides extensive documentation to help users get started quickly.

- Anime.js is a fast and versatile JavaScript animation engine.

- It features an intuitive API with support for SVG animations and scroll synchronization.

- The library allows for modular imports to keep bundle sizes small.

- It includes advanced utilities for staggering animations and creating draggable elements.

- Anime.js is free and supported by sponsors, with comprehensive documentation available.

AI: What people are saying
The comments on Anime.js highlight a mix of excitement and critique regarding the library and its presentation.
  • Many users praise the smooth performance and impressive animations on the landing page, noting its aesthetic appeal.
  • Some commenters express a desire for a WYSIWYG authoring tool, indicating that not all users are comfortable with coding.
  • There are discussions about the library's documentation, with several users finding it well-designed and informative.
  • Users report varying experiences with performance, with some experiencing lag or crashes on certain browsers.
  • Several comments reflect on the evolution of web technologies, comparing Anime.js to older libraries and expressing excitement for its potential.
Link Icon 68 comments
By @jacobgkau - 1 day
Scrolling through that landing page felt a lot smoother & snappier than I would've expected for a page looking like that.
By @terpimost - 8 minutes
Looks cool. Os there any comparison with Green Sock?
By @rsingla - about 23 hours
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.
By @pentagrama - 1 day
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.
By @h2zizzle - about 7 hours
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.
By @qgin - 1 day
This is the first time I haven’t hated scroll hijacking. That was actually really smooth.
By @skerit - about 13 hours
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.

By @thih9 - 1 day
I like that I can grab and drag the browser’s scroll indicator and the animation updates seamlessly (safari mobile).
By @Nijikokun - 1 day
I thought the main site was amazing, then I saw the docs. Absolutely amazing work. Well done. Extremely excited to try out WAAPI.
By @solid_fuel - about 22 hours
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.
By @yamihere - about 19 hours
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 )

By @steve_adams_86 - 1 day
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.

By @photonthug - about 10 hours
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.
By @Mr_Eri_Atlov - about 5 hours
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.
By @majora2007 - 1 day
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.
By @monetus - 1 day
This works really well on the less conventional android browsers I use. Kudos to them, says good things about the library.
By @flufluflufluffy - 1 day
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.
By @bobajeff - about 8 hours
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.

By @XCSme - 1 day
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 :(

By @wg0 - 1 day
Anyone remembers DHMTL from Internet Explorer 4.0? From that - to this. What an evolution of web technologies.
By @Myrmornis - about 7 hours
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?
By @kamranjon - about 12 hours
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.

By @nedt - about 8 hours
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.
By @iamunr - 1 day
These docs are a work of art themselves, fantastic.
By @FlorianRappl - about 22 hours
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!
By @drschwabe - about 23 hours
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 :)

By @kilolympus - about 22 hours
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.
By @maelito - 1 day
How does it compare to Motion ?
By @skeptrune - about 18 hours
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.
By @mrbluecoat - about 16 hours
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>

By @donatj - about 11 hours
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.
By @wilfredk - 1 day
The animations in the docs page is crazy informative, interactive and fluid.
By @wwdx - about 11 hours
Are there any example projects built with this?
By @ViscountPenguin - about 14 hours
Wow, this is incredibly laggy on Ubuntu Firefox...
By @esafak - about 15 hours
Are today's LLMs capable of writing code using these animation libraries? Could you replicate the landing page from its description, for example?
By @true_blue - about 22 hours
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.
By @pacomerh - 1 day
I love how CSS Transforms are so efficient. This is a great lightweight alternative over GSAP.
By @A_Stefan - 1 day
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
By @Tade0 - 1 day
I love how breaking changes in the latest version are shown as diffs.
By @rgovostes - 1 day
Are there authoring tools available, as with Lottie, or is it code-only?
By @leptons - 1 day
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.
By @Agree2468 - about 23 hours
Completely black for me, FF on Windows.
By @mfru - about 7 hours
this felt shockingly smooth, what a great job!
By @jbverschoor - 1 day
I can feel the rotary dials tick on my mouse scrollwheel :-)

How was the model on the homepage created?

By @melodyogonna - 1 day
Finally. AnimeJS is such an amazing project, congratulations on the release.
By @p2hari - 1 day
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.
By @rocketvole - about 24 hours
This might just be the thing that makes me seriously learn js
By @iamsaitam - about 14 hours
Amazing homepage, congratz!
By @card_zero - about 16 hours
This cartoon show is almost like a web page!

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

By @anon1094 - 1 day
Awesome landing page
By @AlienRobot - about 5 hours
Eh, that's cute.

scrolls down

Wow. Okay.

By @cess11 - about 12 hours
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.
By @yakshaving_jgt - 1 day
Whomever designed that interactive landing page animation deserves some kind of Nobel prize.
By @revskill - about 15 hours
The web is powerful.
By @EQYV - about 23 hours
This is beautiful!
By @nicman23 - about 14 hours
no bad programmers
By @adrianvoica - 1 day
It's showtime!
By @JusticeJuice - 1 day
This is so cool.
By @shmerl - 1 day
Very cool presentation page!
By @yieldcrv - about 15 hours
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.

By @matt3210 - about 17 hours
No anime here :(
By @cynicalpeace - 1 day
this is chef's kiss
By @notepad0x90 - about 15 hours
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).