Screenshots
Overview
概要
Web上のアニメーションを担う2つのライブラリ——Anime.js v4と、Framer Motion由来のバニラAPIを持つMotion——を、同じお題で実装して左右に並べる比較実験室です。公平を期すため、Motionも<motion.div>ではなくvanillaのanimate/scroll/inView APIを使い、両者ともに素のDOMを命令的に動かします。スタッガー・SVGの線画・スプリング物理・タイムライン・スクロール連動という5つのテーマを、左右2ペインの同時再生＋コード比較パネル＋スコアカード(実装行数・使用API数・所感)で提示。最後に記述量やバンドルサイズを表(画像ではないHTMLテーブル)でまとめています。
How to use
遊び方・使い方
各テーマで中央の再生ボタンを押すと左右のペインが同時に動き出し、書き味と動きの質感の差を直接見比べられます。スタッガーは中心・先頭・末尾からの伝播や間隔、スプリングは剛性・減衰・質量を変えてオーバーシュートの違いをグラフで確認、タイムラインはスクラブでコマ送り、スクロールテーマは上下分割でスクロール量に連動します。各ペイン下のコード比較パネルで、同じ動きを2ライブラリがどう記述するかをタブで並べて読めます。
Tech stack
技術スタック
animejs 4.5のモジュールAPI(animate/createTimeline/stagger/svg/createSpring/onScroll)とmotion 12のvanilla API(animate/scroll/inView/stagger)を用途別に併用。grid staggerはAnime.jsの得意技、距離ベースのdelayをMotion側で手計算する差など、実装の非対称もそのまま見せています。
Highlights
工夫した点
- 各ペインが{play/reset/setSpeed/setParams}をuseImperativeHandleで公開し、CompareStageが左右へ同時に命令。ライブラリごとのクリーンアップ(Anime.jsのrevert/pause、Motionのstop、ScrollObserver/inViewの解放)を規約化してリークを防止
- 表示するコードスニペットはデモ実装と同じファイルの定数から供給し、実装と解説のズレを排除。ハイライトはshikiをサーバーコンポーネント側で実行し、クライアントへハイライタを送らない
- アニメーションはtransform/opacityのみに限定してレイアウトスラッシングを回避し、画面外テーマはLazyMountで遅延。バンドルサイズは実際のnext build出力から計測して比較表に反映
To improve
改善したい点
- テキスト分割など一部テーマはフェーズ2で、共通の分割ユーティリティによる条件の完全な揃え込みが未完了
- スコアカードの『所感』は主観を含むため、指標の客観化(FLIP計測やjankの数値化)に伸びしろがある
- モバイルでのスクロール連動テーマの体験最適化
What's next
今後の展望
- パーティクル・モーフィングなど比較テーマの追加
- 同一お題を第3のライブラリ(GSAP等)にも広げた三つ巴比較
- 計測結果の自動更新(CIでのバンドルサイズ・実行時間の記録)