アニメーション
Framer Motion・React Spring・GSAP・CSS Animationで実装するアニメーションパターンの比較サンプル集
見せる・隠す（Show / Hide）
詳細を見る →フェード・スライド・トグルアニメーションをFramer MotionとCSS Transitionで実装・比較
Framer MotionReact SpringGSAPCSS Transition
目を引く（Attention）
詳細を見る →バウンス・シェイク・パルス・点滅アニメーションをFramer MotionとCSS Animationで実装・比較
Framer MotionReact SpringGSAPCSS Animation
要素の切り替え（Transition）
詳細を見る →フェード・スライド・スケールなどのコンテンツ切り替えアニメーションをFramer MotionとCSS Transitionで実装・比較
Panel A
Panel B
Framer MotionReact SpringGSAPCSS Transition
重さと弾み（Physics）
詳細を見る →スプリング・慣性・イージングを使った重さと弾みのアニメーションをFramer MotionとReact SpringとGSAPで実装・比較
Framer MotionReact SpringGSAPCSS Transition
スクロールで物語る（Scroll Storytelling）
詳細を見る →scrub・pin・横スクロール・パララックスなど、スクロールに連動した高度なGSAP演出のUIパターン実例集。
スクロールで
物語る。
GSAPScrollTrigger
動きの質感を選ぶ（Easing）
詳細を見る →同じ動きでもイージングが違うと印象がこんなに変わる。power・back・bounce・elasticなどのeaseを体験・比較。
ease-out
back
bounce
elastic
Framer MotionGSAPCSS Transition
文字を演出する（Text Animation）
詳細を見る →SplitText・ScrambleTextで実装する文字アニメーション。1文字ずつフェード・スライド・波・スクランブル・バラけて再集合。
UI Memo
Framer MotionGSAPSplitTextScrambleText
順番に動かす（Sequence）
詳細を見る →stagger・タイムライン制御・ローディングシーケンスなど、複数要素を順番にアニメーションさせるUIパターン実例集。
Framer MotionGSAP
スクロールで見せる（Scroll Reveal）
詳細を見る →スクロールに連動して要素をアニメーションさせる実装をFramer MotionとIntersection Observer APIで比較
Framer MotionReact SpringGSAPIntersection Observer
形を変える（Morph）
詳細を見る →SVGの形状をなめらかに変形させるアニメーション。MorphSVGで図形変形・アイコン変形・パスの描画を実装。
Framer MotionGSAPMorphSVGDrawSVG
動かす・止める（Motion）
詳細を見る →ドラッグ・マウス追従・経路アニメーション・回転など、インタラクティブな動きのUIパターン実例集。
Framer MotionGSAPDraggableMotionPath
Zenn