[HN Gopher] AnimeJs v4 Is Here
___________________________________________________________________
AnimeJs v4 Is Here
Author : adrianvoica
Score : 478 points
Date : 2025-04-03 14:47 UTC (8 hours 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.
| 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.
| 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.
| 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.
| jonwinstanley wrote:
| So what would you suggest to use to move the animation
| forward?
| 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.
| 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.
| jonwinstanley wrote:
| I'm not sure that was scroll hijacked. It all moved at the
| right speed
| 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.
| Agree2468 wrote:
| Completely black for me, FF on Windows.
| 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.
| 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.
| 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.
| 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!
___________________________________________________________________
(page generated 2025-04-03 23:00 UTC)