このページでは、Idle Interfaceで公開しているUIモーション関連記事を 「理解しやすい順番」でまとめています。
スクロール・アニメーション・インタラクションなど、 実験ベースでUIを設計するための知識を段階的に学べる構成になっています。
Phase 1：Animation Fundamentals（基礎）
アニメーションの基本原理を理解するフェーズです。
- #01 requestAnimationFrame
- #02 deltaTime
- #03 easing
- #04 フレームレートとパフォーマンス
- #05 cancelAnimationFrame設計
- #06 実践：減速ルーレット
- #07 アニメーション設計まとめ
Phase 2：System Design（設計）
アニメーションをシステムとして扱うための設計思想。
- #08 ループ設計
- #09 Fixed Time Step
- #10 状態管理
- #11 Interpolation
- #12 Canvas統合
- #13 Input設計
- #14 Scene管理
- #15 Event設計
- #16 実践構築
Phase 3：UI Motion Patterns（実践UI）
実際のUIパターンを通して動きの設計を学びます。
- #17 Number Animation
- #18 Progress Bar Animation
- #19 Button Interaction Animation
- #20 Hover Animation
- #21 Ripple
- #22 Skeleton Loader
- #23 Stagger Animation
- #24 Scroll Reveal
- #25 Scroll Progress
- #26 Scroll Snap
- #27 Parallax Scroll
- #28 Scroll Trigger
- #29 Sticky Scroll
- #30 Scroll Story UI
- #31 Scroll State Machine UI
- #32 Scroll Velocity Animation
- #33 Scroll Mouse Interaction UI
- #34 Scroll Spy UI
- #35 Scroll Sync UI
- #36 Scroll-Driven State UI
- #37 Scroll Time UI
- #38 Scroll Timeline UI
- #39 Scroll Direction UI
- #40 Scroll Direction UI
- #41 View Transition API UI
- #42 Drag Interaction UI
- #43 Swipe Gesture UI
- #44 Momentum Drag UI
- #45 Motion System Design
- #46 Floating Action Button UI
- #47 Magnetic Button UI
- #48 Lerp Smooth Follow UI
- #49 Spring Animation UI
- #50 Inertia Scroll UI
- #50 Scroll Smoothing UI
- #51 Scroll + Drag Hybrid UI
How to Read
- 順番に読む → 理解が積み上がる
- 気になるUIから読む → 実装重視
- CodePenで触る → 理解が深まる
👉 初めての方は Phase 1から順番に読むのがおすすめです。