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.
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.
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!
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)
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.
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.
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.
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.
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!
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)
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.
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.
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.
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.
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.
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 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.
161 comments
[ 3.9 ms ] story [ 256 ms ] thread> 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.
https://support.apple.com/en-us/105120
Thanks for this. Jumping to the bottom of a page was such a chore for me.
With proof!
I have rarely been so impressed with a web tech.
https://oimo.io/works/life/
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.
As others have said, beautiful work on the lander. It looks and performs beautifully.
How was the model on the homepage created?