ブランディングとマーケティングに強い東京のWeb制作会社「株式会社ニュークラウド」。コーポレートサイト、サービスサイト、採用サイト、LP制作お任せください。

Webflowでアニメーションの設定は、左右からスライドして動かしたり、透明の状態からゆっくり要素が出現したりなど、大まかには設定できますが、細かいアニメーションの設定は、ご自身でcssの設定をしなければ理想のアニメーションが表現できません。

今回はちょっとした一例を含めてカスタマイズして展開する方法を共有したいと思います。

まず以下のようにヘッダーを作成します。ここではご相談・お問い合わせボタンが二つ存在しておりますが、後のアニメーション設定のために、わざと2つ設置しております。（弊社のサイトです）

二つ同じボタンがあるのに、プレビューでは以下のように表示されます。

スクロールバーが一番上にある状態です。

しかし、少し下へスクロールすると以下のような画面になります。

画面左上にあったテキストも消えています。

このようなアニメーションは、既存のメニューからでは起こせない挙動となりますので、どのように設定しているかをご説明したいと思います。

まず、動かしたい要素を選択し、画面右側の「interaction」を押します。

「Element Trigger」横の＋ボタンを押し、「Scroll Into View」を選択。

「When scrolled into view」と「When scrolled out of view」のアニメーションを設定します。

「When scrolled into view」は要素が画面上に入った時、「When scrolled out of view」は要素が画面外に出た時のアニメーションの設定を行えます。

ここでは「When scrolled into view」は上にスクロールして一番上にあるヘッダーがスクロールして画面上にインした際に起きる挙動の設定で、「When scrolled out of view」は一番上にあるヘッダーがスクロールすることにより、画面上の外になる、その時の挙動の設定です。（簡単に言うと「When scrolled out of view」は、最初ページを開いてスクロールした瞬間に起きる挙動です）

Actionの中から「Fade」や「Slide」などといった基本的なアニメーションの設定をしますが、上記のようなトリッキーな細かい要素のアニメーションの設定は「Start an animation」を選択します。

「Timed Animations」の右側の＋をクリックします。

（ぼかしている部分は既にカスタマイズしたアニメーションの一覧ですので、初めての場合はこちらは写っておりません）

New Timed Animationの欄に名前を入力できます。（自身で分かるようにネーミングしましょう）

Actionsの右側の＋をクリックし、要素を動かす設定をするのですが、この画面が出た段階で、動かしたい要素を選択した状態で＋を押してください。

ここでいう「headdiv」のブロックを選択します。

選択して＋を押したら

Opacity：100％

Size：Height：Auto

と設定します。

どちらも0.00の時間で設定してください（ドラッグして時間を変更も可能です）

名前を変更し、次に、ここでいう「HD gnav」を選択し、「Actions」の横にある「＋」ボタンを押し、「Move」を選択し

右側に160pxと入力します。（左側に動かしたい場合はー160pxに設定すれば左に動きます。）

こちらも0.00の時間で設定してください。

画面左側にある要素を先に選択しないと「headdiv」のアクションになってしまうので、必ず動かしたい要素を先に選択してから

「＋」ボタンを押してください。

「Save」ボタンを押す。

「テスト」という名前でアニメーションの設定が完了しました。

次に「When scrolled out of view」の「Start an animation」を選択し

Timed Animationsの右側の＋をクリック

New Timed Animationの欄に名前を入力（こちらも自身が覚えやすいネーミング）

今度の「When scrolled out of view」はスクロールし始めた際の挙動を設定するので

先程設定した「headdiv」のOpacity値とSize値を以下のように変更します。

Opacity：0％

Size：Height：0px

名前を「Test」にでも変更し、次に「HD gnav」を選択し、「Actions」の横にある「＋」ボタンを押し、「Move」を選択して

右側に0pxと入力します。（元に戻すイメージ）

こちらも0.00の時間で設定してください。

「Save」ボタンを押す。

画面外に要素を動かす場合は、画面幅がオーバーし、大変見づらくなってしまうので、要素の設定で

「HD gnav」のOverflow値をhiddenに設定する。

アニメーション自体の速度の設定は以下の画面で設定可能です。

（200-400msくらいが良いかと思います、それ以上は少し遅い、かと）

いかがでしたでしょうか。

Webflowは直感的にアニメーションを設定できる便利なツールですが、少し工夫を加えることで、より細かく、より洗練された動きを表現することが可能です。

今回のように「When scrolled into view」と「When scrolled out of view」を組み合わせ、Timed Animationsを活用することで、既存のプリセットだけでは実現できないオリジナルの挙動を作ることができます。

アニメーションは単なる“動き”ではなく、ユーザー体験を向上させるための設計の一部です。

「なんとなく動かす」のではなく、「なぜこの動きが必要なのか」を考えながら設計することで、より質の高いWebサイトへと進化します。

ぜひ今回の内容をベースに、
自社サイトやクライアントワークに応用してみてください。