SSGOI

#FEY_LT

Transcript

1. モバイルアプリのような Web ページ遷移体験、 SSGOI キム・ジニョン tbs01215@gmail.com 現職：キャル株式会社 ウェブエンジニア 興味: AI-Driven Coding, ボクシング
2. Webでもネイティブアプリのような 「ページ遷移」 を What is SSGOI Webページ移動時にモバイルアプリ級の アニメーションを付与するライブラリです。 SSGOI
3. 既存の強者、 Motion (旧 Framer Motion) インタラクティブWebの「王」 ・強力なランタイム物理エンジン & ジェスチャシステム ・複雑なマイクロインタラクションの実装には必須の選択肢 (旧 Framer Motion) しかし、単純なページ遷移 には？ 「遷移アニメーションのためだけに、常に重い物理エンジンを動かす必要が あるのか？」
4. Pain Points 1. ブラウザの断片化 Safari, Chromeなど、ブラウザ間での体験の不一致 2. パフォーマンス問題 低スペック端末での JSメインスレッド占有による Jank発生 3. 重いバンドルサイズ 単純な遷移機能に対して、ライブラリの容量が大きすぎる Solution なぜ SSGOI なのか？ 「パフォーマンス最優先」 に特化した設計 すべてのブラウザで、 常に60fps以上の滑らかな体験を 提供することを目指しています。
5. コア動作原理： CPU vs GPU SSGOI (GPU via WAAPI) → Pre-compute 物理エンジンの計算結果を「キーフレーム」に事前変換 → WAAPI Execution Web Animations APIに命令を渡すだけ JSが止まってもアニメーションは滑らか Motion (CPU) → Runtime Calculation JSが毎フレームのアニメーションロジックを実行 → Main Thread Dependency 他のロジックが重なると、アニメーションに途切れが 発生 JSスレッドの負荷に影響される
6. 比較要約 項目 SSGOI Motion 目的 ページ遷移に特化 汎用UIインタラクション 駆動方式 GPU 加速(事前計算 ) JS エンジン (毎フレーム計算) バンドルサイズ ~8 KB (超軽量 ) ~35 KB 拡張性 React, Vue, Angular, Svelte, Solid React, Vue 学習コスト 低い 比較的高い
7. デモ (Demo) https://ssgoi.dev/ja/docs/getting-started/introduction
8. こんな時ならおすすめ！ Blog / Portfolio 軽量なパフォーマンスと、洗練された遷移が最優先のプロジェクトに。 Mobile Web (PWA) 低スペックなAndroid端末まで、幅広くカバーする必要がある場合に。 Multi-Framework React, Vue, Svelteなどが混在する開発環境での統一に。
9. ありがとうございました。 「https://ssgoi.dev/ja」ページにあるDiscord、Xなどで連絡できます。 ・韓国人が開発したまだ成長段階のオープンソースプロジェクトです。 ・Contribute と Star をお待ちしています！ github.com/meursyphus/SSGOI