▲Scrolling through that landing page felt a lot smoother & snappier than I would've expected for a page looking like that.
reply▲adrianvoica16 hours ago
[-] 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!
reply▲> Julian (the author) is a genius.
With proof!
I have rarely been so impressed with a web tech.
reply▲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.
reply▲robertlagrant13 hours ago
[-] Yes - exactly. If they were that smooth and looked that good, I'd like more of them. So creative.
reply▲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)
reply▲I don't even remember seeing such a fantastic landing page in long time. it makes you realise how bad others are.
reply▲Do they explain how they made the landing page or share the code somewhere? I agree, it's stunning.
reply▲Does it provide fewer footguns for less experienced devs though?
reply▲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.
reply▲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.
reply▲False. Let the web be fun again
reply▲johnsanders11 hours ago
[-] 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.
reply▲For most websites, sure. For this website? It makes sense, it's a great demo for the product.
reply▲jonwinstanley12 hours ago
[-] So what would you suggest to use to move the animation forward?
reply▲Submitting a form repeatedly by hammering enter and having a new HTML fragment rendered on the server deliver the next frame, obviously.
reply▲That missing Playdate phone accessory.
reply▲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.
reply▲Didn't even see we could scroll until I read this. Clicked on examples instead.
reply▲pentagrama16 hours ago
[-] 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.
reply▲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.
reply▲This is the first time I haven’t hated scroll hijacking. That was actually really smooth.
reply▲jonwinstanley12 hours ago
[-] I’m not sure that was scroll hijacked. It all moved at the right speed
reply▲I think they just measure the scrolling and drive the animations with it. Maybe that's what you mean by hijacking.
reply▲solid_fuel12 hours ago
[-] 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.
reply▲I can confirm. It's not a 100% occurrence, but browsing through that section ends up crashing the tab.
reply▲chrismorgan6 hours ago
[-] Ooh, fun, reproducible on Firefox for Android. Crash signature [@ JS::Heap<T>::exposeToActiveJS ].
reply▲I like that I can grab and drag the browser’s scroll indicator and the animation updates seamlessly (safari mobile).
reply▲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.
reply▲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.
reply▲I get a black screen with a scroll bar. Lockdown mode on iOS.
reply▲> 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
reply▲Most likely due to iOS lockdown mode disabling WebGL rendering.
reply▲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.
reply▲Are there any example projects built with this?
reply▲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.
reply▲I thought the main site was amazing, then I saw the docs. Absolutely amazing work. Well done. Extremely excited to try out WAAPI.
reply▲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.
reply▲steve_adams_8616 hours ago
[-] 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.
reply▲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 )
reply▲This works really well on the less conventional android browsers I use. Kudos to them, says good things about the library.
reply▲majora200717 hours ago
[-] 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.
reply▲flufluflufluffy15 hours ago
[-] 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.
reply▲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 :(
reply▲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.
reply▲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.
reply▲Anyone remembers DHMTL from Internet Explorer 4.0? From that - to this. What an evolution of web technologies.
reply▲Haha, yes. Ist was a great time. document.all etc
reply▲I was just working on a "web app" for personal use yesterday where I'm doing document.getElementById and so forth. It still works ¯\_(ツ)_/¯
reply▲FlorianRappl11 hours ago
[-] 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!
reply▲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.
reply▲These docs are a work of art themselves, fantastic.
reply▲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 :)
reply▲kilolympus11 hours ago
[-] 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.
reply▲spartanatreyu10 hours ago
[-] What GPU do you have?
reply▲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.
reply▲How does it compare to Motion ?
reply▲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!
reply▲reply▲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)
reply▲Wow, this is incredibly laggy on Ubuntu Firefox...
reply▲Are today's LLMs capable of writing code using these animation libraries? Could you replicate the landing page from its description, for example?
reply▲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>
reply▲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.
reply▲Same here on Firefox 128 ESR.
reply▲spartanatreyu10 hours ago
[-] What does your network tab in the browser's dev tools show?
reply▲just a bunch of status 200 GET requests. a few are scripts, but mostly just images
reply▲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.
reply▲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
reply▲I love how CSS Transforms are so efficient. This is a great lightweight alternative over GSAP.
reply▲The animations in the docs page is crazy informative, interactive and fluid.
reply▲I love how breaking changes in the latest version are shown as diffs.
reply▲Amazing homepage, congratz!
reply▲Are there authoring tools available, as with Lottie, or is it code-only?
reply▲Completely black for me, FF on Windows.
reply▲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.
reply▲This cartoon show is almost like a web page!
Incidentally it crashed the browser the second time I looked at it.
reply▲jbverschoor15 hours ago
[-] I can feel the rotary dials tick on my mouse scrollwheel :-)
How was the model on the homepage created?
reply▲melodyogonna15 hours ago
[-] Finally. AnimeJS is such an amazing project, congratulations on the release.
reply▲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.
reply▲rocketvole14 hours ago
[-] This might just be the thing that makes me seriously learn js
reply▲yakshaving_jgt15 hours ago
[-] Whomever designed that interactive landing page animation deserves some kind of Nobel prize.
reply▲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.
reply▲Very cool presentation page!
reply▲notepad0x904 hours ago
[-] 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).
reply▲SeanAnderson4 hours ago
[-] This has nothing to do with internet connection and everything to do with hardware accelerated graphics.
reply