動きの質感を選ぶ（Easing）
このページでは、Framer Motion・GSAP・CSS Transitionを使ったイージング（Easing）の実装パターンをインタラクティブなデモとコードで確認できます。
イージング（Easing）とはアニメーションの「加速・減速の曲線」のこと。同じ距離・同じ時間でも、イージングによって動きの印象は大きく変わる。
「再生」ボタンを押すと全ての要素が同時にスタート。到着タイミングと動きの質感の違いを一目で比較できる。
Framer Motion
🤖 AIプロンプトテンプレート
Next.js + GSAP でイージング比較デモを実装してください。 - 複数の要素を同時にアニメーションさせ、イージングの違いを比較 - power1.out / back.out / bounce.out / elastic.out を使用 - 再生・リセットボタンを実装 - TypeScript / Tailwind CSS v4 を使用
実装方法の比較
| 項目 | Framer Motion | GSAP | CSS Transition |
|---|---|---|---|
| ease指定方法 | 文字列 or 配列（cubic-bezier） | 文字列（power・back・bounce等） | CSS文字列 or cubic-bezier() |
| bounce・elastic | spring物理で代替 | bounce.out / elastic.out をネイティブサポート | cubic-bezierで近似（完全再現は困難） |
| カスタムeasing | cubicBezier()関数 | CustomEaseプラグイン | cubic-bezier() |
| ease種類の豊富さ | 中（CSS準拠＋spring） | 高（最多・bounce/elasticも自在） | 低（CSS標準のみ） |
同じカテゴリの他のページ
文字を演出する（Text Animation）| UI Memo
GSAPのSplitText・ScrambleTextで実装する文字アニメーションのサンプル。1文字ずつフェード・スライド・波・スクランブル・バラけて再集合など、テキスト演出のUIパターン実例集。
スクロールで物語る（Scroll Storytelling）
GSAPのScrollTriggerで実装するスクロール演出のサンプル。scrub・pin・横スクロール・パララックスなど、スクロールに連動した高度なアニメーションのUIパターン実例集。デモ・コード付き。
スクロールで見せる（Scroll Reveal）
スクロールで見せるアニメーションのサンプル。whileInView・IntersectionObserverを使ったUIパターン実例集。Framer MotionとIntersection Observer APIで実装比較。
Zenn