📌 この記事のポイント

• スクロール演出は「トリガー」と「Scroll Transform」で決まる

• Section in Viewは特定エリアの中だけで変化させたい時に使う

• カードの重なりはSticky＋トリガー用の透明要素で作る

• ティッカーは要素を傾けて相殺すると斜めに流せる

• 動かしすぎず、見せたい順序に沿って絞るのがコツ

2026年7月17日更新

Framerのスクロールアニメーションは「トリガー」と「Scroll Transform」で作れる

Framerのスクロールアニメーションは、スクロールに反応するトリガーと、変化を指定するエフェクトを組み合わせるだけで、コードを書かずに作れます。ボタンの追従、カードが重なる動き、横に流れ続けるティッカーまで、仕組みを押さえれば再現できます。

この記事では、NOT DESIGN SCHOOLの講座「Framerではじめる Webアニメーション入門」のポートフォリオ作例をもとに、スクロール演出だけを深掘りして解説します。Framer自体の特徴や料金はFramer入門ガイドにまとめています。

参考動画：Framerではじめる Webアニメーション入門講座【後編】（NOT DESIGN SCHOOL）

スクロールアニメーションとは？種類の全体像

スクロールアニメーションとは、スクロールの位置や量に合わせて要素を動かす演出のことです。この作例では、次の3種類を扱います。

もちがスクールを運営していて感じるのは、この3つを押さえるだけで、サイトの見え方が大きく変わるということです。

基本｜スクロール系のトリガーを理解する

スクロール演出の要は「トリガー（いつ動くか）」です。Framerのスクロール系トリガーには、押さえるべき違いがあります。

On Scrollのままにすると、ページ全体を基準に変化するため、狭いエリアでは変化が少なすぎて気づかれないことがあります。特定の場所だけで動かしたい時は、Section in Viewを使い、対象セクションに「Scroll Section」でIDを付けて指定します。この使い分けが、スクロール演出の精度を左右します。

さらに、Viewportという設定で「セクションの先頭が画面のどこに来たら発動するか」を決められます。真ん中に来たら発動、のように調整できます。何度も再生したい場合はReplayをオンにします。

追従ボタンをスクロールで移動させる

追従アニメーションとは、スクロールに応じて要素の位置を変えながら画面に留める動きです。作例では、最初は中央付近にあるContactボタンを、スクロールすると右下へ移動させています。

手順は次の通りです。

1. 一番親のフレームにScrollアニメーションを追加する

2. トリガーをSection in Viewにし、対象セクション（作品一覧）を指定する

3. 対象セクションに「Scroll Section」でIDを付けておく

4. Viewportを真ん中にして、作品一覧が中央まで来たら発動させる

5. Enterで、発動前の位置をOffset X −200、Y −100にして左上に置く

6. Replayはオン、Exitは消す

これで、作品一覧が画面の真ん中まで来た瞬間に、ボタンが左上の位置から右下へ移動します。オフセットの値を変えれば、移動の方向や距離を自由に調整できます。

カードが重なりながら小さくなる動きを作る

カードの重なりは、スクロール演出の中でも見栄えがする定番です。Position StickyとScroll Transform、そしてトリガー用の透明要素の3つで作ります。

ステップ1｜カードを上部に固定する

作品を囲うWorks（高さ100vh×3枚）のPositionをStickyにし、Top 40で上から40pxの位置に固定します。これで、スクロールしてもカードが上部で溜まるようになります。

ステップ2｜トリガー用の透明要素を用意する

各カードと同じ高さに、透明のトリガー用要素（カード1・カード2・カード3）を置き、それぞれに「Scroll Section」でIDを付けます。この透明要素が、どのカードがどこまで来たかを判定する目印になります。

ステップ3｜Scroll Transformで段階的に変化させる

カードにScroll Transformを付け、トリガーをSection in Viewにします。Section in Viewは、指定セクションの始まりから終わりまでの間でどう変化するかを設定する使い方です。From/Toで次のように段階をつけます。

「Add Section」で多段に設定したら、そのエフェクトをコピーして各カードにペーストし、対象セクションを付け替え、不要な段は「Remove」で消します。これで、カードが重なりながら少しずつ小さく、奥へ流れていく動きになります。数値を触りながら、重なりの深さを調整してみてください。

ティッカー｜横に流れ続ける動き

ティッカーとは、ロゴや文字が横に流れ続ける動きです。横長の要素に「Ticker」エフェクトを付けるだけで流れ始めます。

調整のポイントは2つです。Speedを30%程度に落とすと、落ち着いた速度になります。Directionで流れる向きを選べます。斜めに流したい時は、エフェクト側に斜めの設定がないため、要素自体をRotate −15度に傾け、中の要素を＋15度にして相殺します。こうすると、レイアウトを保ったまま斜めに流せます。

限界と注意点｜動かしすぎない・スクロールを奪わない

スクロール演出は印象的な一方で、扱い方を誤ると使いにくいサイトになります。誠実に3つの注意点を共有します。

• 動かしすぎない：スクロールのたびに何かが動くと、読み手が内容に集中できません。見せたい順序に沿って、動かす要素を絞ってください。

• スクロールの主導権を奪わない：ユーザーのスクロールを止めて演出を強制する作りは、離脱につながりやすいです。ここは判断が分かれるところで、案件のトーンに合わせて調整します。

• 表示の重さを確認する：段階の多い変化は、端末によっては重くなります。実機で動きと表示速度を見ながら仕上げてください。

よくある質問（FAQ）

Q. Section in ViewとOn Scrollはどう使い分けますか？

特定のエリアの中だけで変化させたい時はSection in View、ページ全体を通して変化させたい時はOn Scrollを使います。狭いエリアの演出でOn Scrollを使うと変化が薄くなりがちです。

Q. カードが重なる動きが作れません。

まずWorksをPosition Sticky（Top 40など）で固定し、各カードと同じ高さに透明のトリガー用要素を置いてScroll SectionでIDを付けます。そのうえでカードにScroll TransformとSection in Viewを設定します。

Q. 追従ボタンはどのトリガーを使いますか？

Section in Viewです。対象セクションを指定し、Viewportで「セクションの先頭が画面のどこに来たら発動するか」を決めます。

Q. ティッカーを斜めに流すには？

エフェクトに斜め設定はないので、要素自体をRotateで傾け、中の要素を逆方向に同じ角度だけ傾けて相殺します。作例ではマイナス15度とプラス15度を使っています。

Q. スクロール演出は入れすぎても大丈夫ですか？

入れすぎは逆効果です。読み手が内容に集中できるよう、見せたい順序に沿って絞るのがコツです。