AnimeJs v4 Is Here
animejs.com
animejs.com
With proof!
I have rarely been so impressed with a web tech.
JS animations obviously don't take the place of video/audio media that you'd play/scrub through.
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?
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/
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.
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.
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.
Scroll hijacking is when I try to scroll normally but the page overrides my distance and 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.
https://docs.godotengine.org/en/stable/tutorials/animation/i...
> 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.
> Web browsing - Certain complex web technologies are blocked, which might cause some websites to load more slowly or not operate correctly.
Thanks for this. Jumping to the bottom of a page was such a chore for me.
As others have said, beautiful work on the lander. It looks and performs beautifully.
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.
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 )
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 :(
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.
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.
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.
async/await + animation (ie- with AnimeJS) is highly underrated.
And mad props for skipping the now dying trend of refactoring entire codebase to TypeScript :)
In any case, like everyone else here, I'm very impressed with OP's site and documentation. Very slick!
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 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.
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.
<mind>me</blown>
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.
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.
How was the model on the homepage created?
Incidentally it crashed the browser the second time I looked at it.
scrolls down
Wow. Okay.
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.