スクロールは閲覧者がページを進める唯一の操作であり、そこに動きを紐づけると「読み進めた実感」が生まれます。ここではスクロール連動のアニメーションを15種類集めました。CSSだけで完結する animation-timeline の新仕様、交差監視による従来型、GSAP ScrollTrigger を使う本格的なものまで、実装コストの違う選択肢を並べています。
スクロールアニメーション · 15 EFFECTS
実装の勘所
「見えたらフェードイン」程度なら animation-timeline: view() の2行で済みます。ライブラリを入れる前に、CSSネイティブで要件を満たせないか確認してください。対応ブラウザが不安な場合も、@supports のフォールバックを書けば安全に導入できます。
スクロールを乗っ取って横移動させたり、進行を止めて演出を挟んだりする実装は、閲覧者の操作感を壊します。使う場合は区間を短く保ち、必ずスクロールで抜けられるようにしてください。
スクロール連動の動きは、動きに酔いやすい人にとって最も負担が大きい種類です。reduce 指定時はアニメーションを止め、最終状態を表示するようにしてください。
FAQ
新規実装で「見えたら動く」だけならCSSの animation-timeline: view() が最短です。スクロールを戻したときに巻き戻る挙動も自動で付きます。一方、発火時に別の処理（計測イベントの送信、データ取得）も走らせたい場合や、一度だけ実行したい場合は IntersectionObserver が適しています。
scroll イベントの中でレイアウトを読み書きしていることがほとんどの原因です。getBoundingClientRect と style の書き込みを交互に行うと、毎フレーム強制的な再レイアウトが発生します。CSSの animation-timeline や IntersectionObserver に置き換えると、この問題自体が消えます。
はい。Motion Lab のコードスニペットとAIプロンプトは、クレジット表記なしで自由に使えます。商用プロジェクトでもそのまま利用できます。
他のカテゴリを見る
全139種類を技術別（CSS / JS / Tailwind / Framer Motion / GSAP）で絞り込むなら カタログ一覧、 長文の解説を読むなら ガイド、 AIエージェントでの実装手順は Claude Code でWebアニメーションを実装する へ。
BOOKS · PR · AMAZON
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
学びを止めない · AMAZONサブスク
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。