神アプデ AnimeJs v4爆誕！ヌルヌルすぎてヤバいと話題
引用元：https://news.ycombinator.com/item?id=43570533
ランディングページをスクロールしたんだけど、見た目からは想像できないくらいスムーズでサクサク動いててマジでびっくりした。
作者のJulianは天才だね。v4の開発には時間がかかったみたいだけど、待った甲斐があったよ！v3もランディングページで使ったり、簡単なゲームエンジンを作ったりしたけど、今回のバージョンは完全に別次元だわ。作者にマジ感謝！これからも頑張って！
＞Julian（作者）は天才だってのはマジ。
証拠もあるぜ！
ウェブの技術でこんなに感動したのは初めてかも。
再帰的なGoLを初めて見た時を思い出すな：https://oimo.io/works/life/
マジそれな。普段はこういうスクロールして「色々起こる」系のサイトはあんまり好きじゃないんだけど、これはマジで洗練されててクールだわ。マジ最高。
そうそう、まさにそれ。もしこういうのが全部これくらいスムーズで見た目も良かったら、もっと好きになるかも。クリエイティブだね。
ああ、こういうやり方が100％適切な場所だよね。
スクロールの単位ごとにアニメーションのシーケンスが結構進むのがミソだと思うんだよね（だからスクロールが長く感じない）。
こんなに素晴らしいランディングページ、最近見た記憶がないわ。他の酷さを思い知らされる。
え、これって皮肉？
モバイルだと、意味不明なグラフィックが回転しながら、たった数行の文章を読むために何キロもスクロールする必要があるんだけど。
マジで無駄が多い。
もしかしたらスマホだと表示がおかしいのかもだけど、ランディングページがどう作られてるかっていう賞賛しか見てないよ。グラフィック自体は意味ないけど、周りの情報は参考になるし。グラフィックは情報を伝えるためじゃなくて、インスピレーションを与えるためのものだと思う。
なるほどね、これで納得できた。短いフレーズが変わるのを見るためにめっちゃスクロールしなきゃいけなくて、割に合わないなって思ったんだよね。グラフィックはきれいだけど、私には追加の情報はなかったなー。
演出は、スクロール連動のアニメーションでもよかったんじゃないかな。
ランディングページをどう作ったかとか、コードをどこかで公開してるのかな？私もあれはすごいと思う。
やあ、作者です。ランディングページをどうやって作ったかの講座を作ろうと思ってるんだけど、興味ある？
すぐに申し込むよ！アニメーションのアイデアをコードにするクリエイティブな過程に特に興味があるんだ。例えば、どんなアニメーションにしたいかっていうアイデアがあるとする。それをコードで表現する一番いい方法って何？
ぜひお願いしたいです！興味がある人のためにメールアドレスを集めるサイトとかありますか？
＞ランディングページのフッターにメールアドレスを残せるよ＞”https://animejs.com/#site-footer”
近いうちに講座用の専用ページを作る予定だよ。興味を持ってくれてありがとう！
FYI: フォームで「問題が発生しました。後でもう一度お試しください。」ってエラーが出てるよ。
何度も言うみたいで悪いけど、うん、見たい！
それ見たいな。
間違いなくイエスだね めっちゃイエス おー、イエス！ まさに俺が探しに来たものじゃん！ マジですげー！ gh-pages branchがあるけど、private repoから生成されたものみたいだよ: https://github.com/juliangarnier/anime/tree/gh-pages それってどのマシンでの話？ 経験の浅い開発者にとって、もっとfootguns（自爆しやすい点）が少ないってこと？ 賢いとは思うけど、正直なところ、どれだけスムーズかはどうでもいいんだよね。スクロールは単にページを上下にスクロールするだけでいい。アニメーションを呼び出すべきじゃない。メディアの再生、スローダウン、スピードアップ、ランダムシークなど、確立されたUXパターンがすでにあるんだから。 ここでの滑らかさの一部は、色付きヘッダーのあるセクションまでスクロールすると、テキストのスクロールが1:1になることだよね。スクロールが「あるべき姿」という直感を「壊す」ことなく、ページをあんなにfancyに見せることが可能だってことを示してる。 やあ、このライブラリの作者だよ。その通り、僕は本当にbody scrollを「ハイジャック」してるわけじゃなくて、ほとんどのbodyコンテンツはページに合わせて自然にスクロールするようにしつつ、背景アニメーションだけをコントロールしてるんだ。 マジかよ。ウェブをもっと楽しもうぜ！ ほとんどのウェブサイトではそうかもね。でも、このウェブサイトには合ってるんじゃない？製品のデモとしては最高だと思うよ。 アニメーションやビデオを再生・遅延・加速させるって話じゃないんだよね。どっちかっていうと、「体験」を進んだり戻ったりするってこと。嫌いな言葉だけどね。スクロール動作の自然な進化だと思う。 アニメーションは別に「メディアの再生」じゃないじゃん。 じゃあ、アニメーションを進めるには何を使えばいいと思う？ フォームを連打して送信して、サーバー上で新しいHTMLフラグメントをレンダリングして次のフレームを配信すればいいじゃん、明らかに。 Playdateのスマホアクセサリがない。 そもそもアニメーションを使うなってことだね😊 アニメーションライブラリなんだから、何ができるかを示すのが目的なんじゃないの？ マジかよ、これ реально すごすぎ。2000年代初頭のネットのクリエイティビティと、今の洗練されたデザイン基準が合わさった感じ。マジでよくできてる 作者だけど、このランディングページについてのコメントで一番嬉しいかも。Flashでウェブ開発を始めたのが2000年代だから、マジで心に響くわ。ありがとう！ モバイルブラウザでこんなにスムーズに動く、複雑でレイヤーが重なったインタラクティブアニメーションは初めて見たかも。FPSはまるでDoom 2016をハイスペックPCでやってるみたい。 スクロールハイジャックってマジ嫌いだけど、これは初めて嫌じゃなかった。マジでスムーズ。 スクロールハイジャックっぽくないのは、実際にはハイジャックしてないから。 モバイルのSafariだと、ちょっと重い感じがする。アニメーションはめっちゃスムーズだけど、宇宙ステーションみたいなやつが、スクロールの速度の割に回転が遅い気がする。もしかして俺だけ？技術的な達成度はマジですごいし、作者はマジで尊敬するけど、こういうのはやめてほしい スクロールを計測して、それでアニメーションを動かしてるだけじゃないかな。それがハイジャックってこと？ スクロールハイジャックされてる感じはしなかったな。全部いい感じの速度で動いてたし。 ブラウザのスクロールバーを掴んでドラッグしても、アニメーションがシームレスに更新されるのが良い（Safariモバイル）。 ユーザーの操作に反応して、ユーザーに操作の自由を与えてるのが良い。スクロールをハイジャックして、ユーザーから自由を奪うウェブサイトもあるけど、これはマジで良い解決策だし、アクセシビリティにも優しい。 iOSでスクロールバー掴めるの今知ったわ！！これマジ助かる。ページの一番下まで行くのいつも面倒だったんだよね。 iOSのロックダウンモードだと、スクロールバー付きの真っ黒画面になっちゃう。 ＞ロックダウンモードを有効にすると、デバイスは通常どおりに機能しなくなるんだって。（…） たぶんiOSのロックダウンモードがWebGLレンダリングを無効にしてるせいじゃないかな。 Linux Chromiumのデスクトップでも同じ現象が起きてる（シークレットモードでも）。コンソールにはWebGLのエラーが出てるよ。 未だにwebアニメーションAPI用のWYSIWYG GUIベースのオーサリングツールが出てこないんだよね。アーティストとかアニメーターって、四角を動かすためにドキュメントとコードを読み込むのが嫌いじゃん？Flashが死んでから10年くらい経つのに、まだ代替品がない。 https://rive.app/ 試してみた？ 俺は正直https://godotengine.org/features/ だと思ってるけど、GUIだけのWYSIWYG作成フローはFlashよりちょっと早く限界が来る気がする。でもコンテンツはたくさん作られてるよ！https://docs.godotengine.org/en/stable/tutorials/animation/i… 本音を言うなら、全然近くない。Blenderでアセット作ってGodot/Unityでスクリプト組めば、フランケンシュタインみたいになるかもね。 メインサイトもすごいと思ったけど、ドキュメント見たらマジで感動した。素晴らしい出来だね。WAAPIを試すのがめっちゃ楽しみ。 マジかー、めっちゃ好きなんだけど…。このページ（https://animejs.com/documentation/scope/）をFirefox(136.0.3)で、しかもuBlock Origin有効にして開くと、タブが即落ちするわ。冒頭のイケてるアニメーションを見た直後だったから、マジで笑えた。 マジだ。再現性100%じゃないけど、このセクション見てるとタブがクラッシュする。 マジかよ、Android版Firefoxでも再現するぞ。クラッシュのシグネチャは[@ JS::Heap 137じゃ見ないな。 Androidの137安定版と、Linuxの138 Nightly(2025-03-10版)で再現できたわ(普段はそんなに古いの使ってないんだけど、今回は色々あって)。uBlock Originが有効になってる必要あるけど。 え、マジ？俺もAndroidでuBlock Origin使ってるけどなー。 実際に使う感じは分からんけど、APIデザインとドキュメントはマジで良いと思う。めっちゃ考えられてる感じする。例えばtimerのドキュメント見たら、timer APIで何ができて、どうやるのか1分くらいで理解できたもん。これなら安心してライブラリ試せるわ。他の人も言ってるように、ランディングページの出来が素晴らしい。見た目もパフォーマンスも最高。 見た目はめっちゃ良いね！ テキストよりも、何が作れるかのデモの方が重要じゃない？テキストじゃ、デモが与えてくれる情報のほんの一部しか伝えられないと思う。 「マジすごい」って言ってる人たちに仲間入りー。スクロールに合わせてコンテンツがアニメーションするウェブサイトって基本嫌いなんだけど、練り込まれた長文コンテンツは別。これはマジでslickだわ。 マジでヤバい。APIも良さげだし、ランディングページは今まで見た中で最高だし、機能も豊富すぎ。自分のメインアプリで使えたらなぁ。 マイナーなAndroidブラウザでもちゃんと動くじゃん。マジすごい。ライブラリとしても期待できる。 マジ信じらんない。何これ！ドキュメントページで永遠に遊べそう。全部考え抜かれてるし、プレゼンも最高。感動しかない。 ランディングページ最高！ リサイズへの対応って、レスポンシブ対応とはまた別問題なんだよね。どんなviewportサイズでも動くってことと、viewportサイズが変わる時にアニメーションをスムーズに処理するってことは違う。後者の方がずっと難しい。 だよね。リサイズにちゃんと対応してるとは思ってなかった。ランディングページがウィンドウサイズ変更してレスポンシブを試して欲しかったんだと思ったし（アニメーション自体がコンテンツエリアのサイズを変えてることに気づくまでは）。 Internet Explorer 4.0のDHMTL覚えてる人いる？あれからここまで進化したんだね。ウェブ技術の進化すげー。 そうそう、DHTMLのアイデアはいまだに完成してないけどね。 あー、あったね！document.allとか。いい時代だった。 昨日、個人的な用途で document.getElementById とかで色々やってる「ウェブアプリ」作ってたんだけど、まだ動くんだよねー。まあ、いっか。 たぶん的外れな質問だけど…ここにあるエンジンの3D爆発図モデルって、複雑なシステムが互いに連携して動作するのを視覚的に表現してるだけ？それとも実際にこのツールキットで作られたもの？API をざっと見た感じだと、低レベルのアニメーションサポートみたいだけど、イントロを見ると CAD っぽい印象を受けるんだよね。もっとコメントを表示（1）
こういうページアニメーションが、最新の2025年のマシンで、CPUスパイク20%未満、CPU/GPUのウォーミングアップなしで120fpsでレンダリングされることを願うよ。
残念ながら、まだそこには到達できてないね。もし達成できたら、ウェブはもっと面白くなるだろうな。Macromedia Flashの記憶が蘇るよ。
JSアニメーションは明らかに、再生/スクラブするビデオ/オーディオメディアの代わりにはならないよ。もっとコメントを表示（2）
＞https://news.ycombinator.com/item?id=43572887
スクロールハイジャックっていうのは、普通にスクロールしようとしても、ページが距離とか速度を上書きするようなこと。
＞Webブラウジング – 特定の複雑なWebテクノロジーがブロックされ、一部のWebサイトの読み込みが遅くなったり、正しく動作しなくなる場合がある”
詳しくはここ見て→https://support.apple.com/en-us/105120
＞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.もっとコメントを表示（3）
でもねー、こういう形式のコンテンツ、マジで嫌い。ちょっと読むだけで、死ぬほどスクロールしなきゃいけないじゃん。
”10倍速で生産性上げた”系のLLM信者たちへの挑戦状：このランディングページをプロンプトだけで再現するのにどれくらい時間かかる？あと、ハウツーコースにいくら払う？（笑）
”仕事奪われる”系のLLM信者たちへの挑戦状：git gudだわ。可能だって証拠がここにあるじゃん。
（えへへ、この言葉遊びがしたかっただけなんだ。全部ChatGPTだけどね！
＞https://pastebin.com/zrsj6DcB”
レスポンシブレイアウトの例をチェックしてたら、ブラウザのウィンドウサイズ変更した時にスクロールが一番上に戻っちゃったのが唯一気になった点かな。
とは言っても、ウィンドウリサイズした時にスクロールバーが一番上にリセット/ジャンプするのはおかしい。少なくとも、フルサイズに戻した時は元に戻るべき。
