デザイナー内のインタラクションパネル（Interactions panel）は、トリガーとアニメーションを使用してシンプルで複雑なインタラクションを構築する場所です。トリガーは、要素をクリックするか、ページをスクロールするなどのアクションで、アニメーションを開始させるか、ページ上の1つ以上の要素を連続的にアニメーションさせることができます。
このレッスンで学ぶこと
異なるタイプのトリガー（triggers）
インタラクションパネルは主に2つのセクションに分かれている： Element triggersとPage triggersです。
エレメントトリガー（Element triggers）
エレメントトリガーは、インタラクションパネルのElement triggersセクションに追加することができます。これらのトリガーは、サイト訪問者が要素とのインタラクション（ホバリングやクリックなど）を行った際にアニメーションを開始します。
エレメントトリガーを追加するには：
- キャンバス上の要素（セクション、ボタン、div ブロックなど）を選択して、要素トリガーとして使用したい要素を選択します
- Element triggerの右側にある「プラス」をクリックします
その後、リストから要素トリガーを選択することができます。さらに詳しく知りたい場合は、各オプションにホバーしてみることもできます。
利用可能なエレメントトリガーは以下の通りです：
- マウスクリック（タップ） - Mouse click (tap)
- マウスホバー - Mouse hover
- 要素上でマウスを移動 - Mouse move over element (continuous)
- ビューにスクロール - Scroll into view
- ビュー内でスクロール中 - While scrolling in view (continuous)
エレメント・トリガーは、キャンバス上の1つまたは複数のエレメントをアニメーションさせることができます。言い換えると、トリガーとして機能する要素は、常にアクションのターゲットである必要はなく、別の要素をアニメーションさせるトリガーであることもできます。例えば、ボタンエレメントをトリガーエレメントとして設定し、クリックされると、イメージエレメントを円状に回転させることができます。
カスタムエレメントトリガー
ナビゲーションバー、ドロップダウン、タブ、スライダーなど、サイト訪問者がインタラクションを行う際のカスタムアニメーションを追加することもできます。これらのトリガータイプには、キャンバス上で対応する要素（例：ナビゲーションバー、ドロップダウンなど）を選択することでアクセスできます。
- ナビゲーションバーが開くとき — Navbar要素内のNavbarを選択します。アニメーションは、ナビゲーションバーのメニューが開閉する際に実行されます。
- ドロップダウンが開くとき — Dropdown要素内のDropdownを選択します。アニメーションは、ドロップダウンメニューが開閉する際に実行されます。
- タブの変更 — タブ要素内のtab linkを選択します。アニメーションは、タブリンクが表示されている（アクティブ）か、表示されていない（非アクティブ）場合に実行されます。
- スライダーの変更 — スライダー要素内のSliderの1つを選択します。アニメーションは、スライダースライドが表示されるか、表示されなくなる際に実行されます。
キャンバス上でnavbar要素を選択すると、エレメントトリガーメニューでNavbar opensトリガーが利用可能になります。
ページトリガー（Page triggers）
ページトリガー（ Page trigger.）は、ページの状態に変更があるときにアニメーションを開始するトリガーで、インタラクションパネルのエレメントトリガーセクションにエレメントトリガーを追加することができます。これらのトリガーは、ページが読み込まれたときなど、ページの状態が変化したときにアニメーションを開始します。
ページトリガーを追加するには、Page trigger の右側にある「プラス」をクリックします。
利用可能なページトリガーは次の通りです：
- ビューポート内のマウス移動 - Mouse move in viewport
- ページのスクロール中 - While page is scrolling
- ページの読み込み - Page load
- ページのスクロール - Page scrolled
トリガーの設定方法
インタラクションパネルでトリガーのタイプを選択した後、トリガー後に実行したいアクションを指定できます。利用可能なアクションオプションは、選択したトリガータイプに依存します。たとえば、Mouse click (tap)エレメントトリガーを選択した場合、1回目と2回目のクリックで実行されるアクションを選択できます。
トリガー設定
デフォルトでは、要素にトリガーを設定すると、その特定の要素とのインタラクションが発生します。このインタラクションは、すべてのデバイスブレークポイントで発生します。
特定のブレークポイントでアニメーションをトリガーする方法
特定のデバイスでアニメーションをトリガーするには、アニメーションを発生させたいデバイスのブレークポイントを確認できます。デフォルトでは、アニメーションはすべてのブレークポイント（デスクトップ以上、タブレット、横向きの電話、縦向きの電話）でトリガーされます。
たとえば、マウスクリックのインタラクションをデスクトップ以上のブレークポイントでのみ発生させたい場合、訪問者はマウスでインタラクションをトリガーできるようになります。
同じクラスを持つすべての要素でアニメーションをトリガーする方法
同じクラスを持つすべての要素でアニメーションをトリガーしたい場合、そのクラスの1つの要素にインタラクションを設定し、そのクラス全体に適用することができます。
そのクラスのすべての要素にアニメーションを設定するには：
- 要素にアニメーションを設定します。
- Trigger settingsに移動し、Class を選択します。
- Class ドロップダウンからアニメーションを設定したいクラスを選択します。
インタラクションの再利用について詳しく学ぶ。
その他のアニメーション設定
スクロールオフセット（Scroll offset）
多くのページスクロールトリガー（例：「ビュー内にスクロール」「ビュー内スクロール（連続）」など）では、offsetを設定するオプションがあります。これにより、特定のスクロールページのパーセンテージに達するまで、インタラクションが開始されなくなります。スクロールオフセットが長いほど、サイトの訪問者がスクロールするまでに時間がかかります。
遅延（Delay）
アニメーションに遅延（delay）を設定することで、指定された遅延時間が経過してからアニメーションが発生するようになります。
スムージング（Smoothing）
アニメーションのスムージングも変更できます。スムージングは、アニメーションがマウスの動きにどれくらい迅速に応答するかを定義します。スムージングについて詳しく学ぶ。
アニメーションの設定方法
今作成したトリガーに基づいてアニメーションを設定するには、カスタムcustom animationを作成するか、プリビルトアニメーション（fade, shrink, jelloなど）を選択できます。
プリビルトアニメーションの設定方法
プリビルトアニメーションは、デザイナーで事前に設定された出現と消失、強調アニメーションです。これらを選択することで、アニメーションの各側面を個別に構築する必要がないため、迅速な代替手段を選択できます。
注意： プリビルトアニメーションは要素トリガーにのみ設定できます。ページトリガーには設定できません。
プリビルトアニメーションを設定するには：
- Element triggerを設定します（例：マウスホバー、ビュー内スクロールなど）。
- 開始アクションセクションからActionドロップダウンを開きます（たとえば、マウスホバー要素トリガーを選択した場合、Actionドロップダウンを On hoverセクションから開きます）。
- Appear & disappearセクションまたはEmphasisセクションからアクションを選択します。
カスタムアニメーションの設定方法
カスタムアニメーションを設定するには：
- Element trigger（例：mouse hover, scroll into viewなど）またはPage trigger （例：Page load, page scrolledなど）を設定します。
- starting actionセクションからActionドロップダウンを開きます（たとえば、マウスホバー要素トリガーを選択した場合、ActionドロップダウンをOn hover セクションから開きます）。
- Custom animationの下にある「Start an animation」をクリックします。
- Timed animationsの横の「プラス」をクリックします。
- インタラクションパネルの上部フィールドにアニメーションのNameを入力します。
- Actionsの右にある「プラス」をクリックします。
- ドロップダウンからTransform, Style, Miscellaneousのアニメーションを選択します。
次に、アニメーションのタイミングをanimation timeline で調整します。
アニメーションタイムライン（animation timeline）の使用方法
新しいアニメーションを作成するか、既存のアニメーションを編集する場合でも、アニメーションタイムラインは異なる要素をキーフレームでアニメーション化する場所です。
アニメーションタイムラインにアクションを追加するには、まずanimation timelineに移動します。次に、アクションを2つの方法で追加できます。
- • タイムラインの上部にある「プラス」アイコンをクリックします。
- 既存のアクションの前、中、後、または間にあるタイムライン内の「プラス」アイコンをクリックして、インラインでアクションを追加します。
例
たとえば、「While page is scrolling」のページトリガー用のアニメーションを作成します。ページをスクロールすると、ヒーローセクションのテキストが水平方向に移動し、不透明度が低くなります。アニメーションタイムラインの緑色の再生ヘッドは、ページの現在位置（0%から100%）を示しています。
タイムドアニメーションは通常、他のトリガー（ミリ秒、秒など）を使用しますが、この例ではページの現在のスクロール位置をパーセンテージで示しています。この場合、0%はページの上部のスクロール位置を示し、100%はページの下部のスクロール位置を示します。
さて、ページ内のポイントにさまざまなアクションを追加できます。たとえば、0%のスクロール位置に4つのアクションを追加できます。
- Text background — Move 900px
- Text background — Opacity 0% (fully transparent)
- Text foreground — Move 900px
- Text foreground — Opacity 0%
これらのアクションによって、テキスト背景とテキスト前景の位置が0px（移動なし）に設定され、不透明度が100%（完全に不透明）に設定されます。サイト訪問者がページの上部にいるとき、テキスト背景と前景は完全に不透明で、ページ上の元の位置に設定されます
また、100%のスクロール位置に4つのアクションを追加することもできます：
- Text background — Move 900px
- Text background — Opacity 0% (fully transparent)
- Text foreground — Move 900px
- Text foreground — Opacity 0%
この場合、各要素はそれぞれ900pxの距離だけ移動し、不透明度が0%に設定されます。スクロールアニメーションの終了アクションを見てみましょう。
これらのアクションによって、テキスト背景とテキスト前景の位置が900px（両側に900px移動）に設定され、不透明度が0%（完全に透明）に設定されます。サイト訪問者がページの下部にいるとき、テキスト背景と前景は完全に透明で、元の位置からサイトページの右または左に900px移動します。
プロのヒント： アニメーションタイムラインで複数のアクションを選択する方法は2つあります。アニメーションタイムライン上の連続する複数のアクションを選択するには、Shiftキーを押しながらアクションを選択します。アニメーションタイムライン上の非連続の複数のアクションを選択するには、Macの場合はCommandキー、Windowsの場合はControlキーを押しながらアクションを選択します。
アクションのターゲットについて
デフォルトでは、アニメーションタイムラインに追加するすべてのアクションは、選択した要素に影響を与えます。ただし、アクションのターゲットを次の2つの方法で変更できます：
- アクションが影響を及ぼす対象要素を置き換える
- アクションが選択した要素だけに影響を及ぼすか、同じクラスを持つすべての要素に影響を及ぼすか、またはインタラクションのトリガー自体に影響を及ぼすかを選択する
対象要素の置き換え方
アクションが影響を及ぼす要素を置き換えるには：
- アニメーションタイムライン内でアクションを右クリックします
- Change targetをクリックします
- キャンバス上の別の要素を選択して、アクションを追加します
重要: アニメーションタイムライン内の設定を変更すると、アニメーションシーケンスをトリガーするすべてのインタラクションに影響します。
アクションが個々の要素、要素のクラス、またはインタラクションのトリガーに影響を及ぼすか選択する方法
アクションを作成した後、このアクションが以下のどれに影響を与えるかを選択できます：
- 選択した要素だけ - Only the selected element
- • 選択した要素と同じクラスを持つすべての要素 - All elements with the same class ****as the selected element
- • インタラクションのトリガー自体 - The interaction trigger itself
選択した要素だけを対象にする方法
選択した要素は、作成したアニメーションのアクションのデフォルトの対象です。選択した要素に影響を及ぼすように設定した任意のアクションは、常にその特定の要素に影響を及ぼします。したがって、アクションが選択した要素に影響を及ぼすように再利用する場合、そのアクションはどの要素がインタラクションをトリガーに設定されているかに関係なく、その要素に影響を及ぼします。
選択した要素と同じクラスを持つすべての要素を対象にする方法
また、選択した要素のクラスを対象にすることもできます。これにより、アニメーションアクションが選択した要素と同じクラスを持つすべての要素に影響を及ぼします。
このオプションは、ページが読み込まれる際に複数の要素を同じパターンで移動させたい場合に便利です。すべての要素に同じクラスを割り当て、異なる位置に移動するためにコンボクラスを使用してページ上の異なる位置に移動させます。その後、同じアニメーションアクションをベースクラスに適用して、各要素が同じパターンで移動しますが、異なる元の位置から移動します。
また、影響を受ける要素を、インタラクションのトリガーと同じクラスを持つ子要素、兄弟要素、または親要素に制限することもできます。
同じクラスを持つ子要素、兄弟要素、または親要素を対象にする方法
アクションによって影響を受けるクラスを制限するために、それらがトリガー要素の子要素、兄弟要素、または親要素であるかどうかを指定することができます。
このオプションは、例えば、同じクラスを持つボタン要素内のすべての矢印をホバーするとアニメーションさせたい場合に便利です。同じクラスを持つすべての要素にアニメーションアクションを追加すると、1つのボタンにホバーするとそのページ内のすべてのボタン内のすべての矢印がアニメーションされることに気付くでしょう。すぐにホバーしているボタンにアニメーションアクションを制限するには、Affect メニューに移動して「クラス」を選択します。次に、Class のドロップダウンをクリックし、「このクラスを持つ子要素のみ」を選択します。
「Only siblings with this class」オプションは、アニメーションを適用したい要素がトリガー要素の兄弟要素である場合、例えばメニュードロップダウンやポップアップモーダルの場合に便利です。また、「Only parents with this class」オプションは、アニメーションを適用したい要素がトリガー要素の親要素である場合に使用できます。
注意: アニメーションベースのクラスを作成する前に、要素にclassを適用してください。クラスがない要素に対して適用されるアクションには「class」オプションは利用できません。
インタラクションのトリガーを対象にする方法
また、Interaction triggeにのみ影響を与えるアクションを作成することもできます。その後、他のインタラクションでアニメーションを再利用する場合、アニメーションは新しいインタラクションのトリガー要素に対応する要素でアクションの前のターゲット要素を置き換えます。これにより、新しいアニメーションを作成する必要なく、同じアニメーションを素早く任意の要素に適用できます。
注意: 「Interaction trigger」オプションは、アクションがインタラクションのトリガー要素に適用される場合にのみ利用可能です。そのため、ページトリガーでトリガーされるアニメーションではこのオプションは利用できません。
既存のアニメーションの編集方法
既存のアニメーションを編集するには、インタラクションパネルに移動し、アニメーションをクリックして設定を開きます。次に、アニメーションの名前の上にカーソルを移動して、名前の右側にある設定の「歯車」アイコンをクリックします。これにより、そのアニメーションのアニメーションタイムラインが開きます。
その他のリソース
未使用のトリガーとアニメーションの削除方法
トリガーやアニメーションの削除方法
インタラクションパネルからトリガーやアニメーションを削除できます。これにより、トリガーやアニメーションが対象の要素またはページアクションから削除されます。トリガーやアニメーションを削除するには：
- Interactions panel に移動します
- 削除したいアニメーションまたはトリガーの上にカーソルを移動します
- トリガー名の横にある「ごみ箱」アイコンをクリックします
注意: インタラクションパネルからトリガーを削除しても、それまで関連付けられていたアニメーションは削除されません。それは特定のトリガーからアニメーションが削除されるだけです。新しいトリガーの設定時にアニメーションを引き続き使用できます。
サイトからトリガーやアニメーションを削除する方法
インタラクションパネルからアニメーションや、アニメーションに関連付けられていないトリガーを削除しても、それはサイトから完全にトリガーまたはアニメーションを削除するわけではありません。これは、以前に作成したアニメーションを他の要素やページのトリガーで再利用できるためです。ただし、使用されていないトリガーやアニメーションを整理して、サイトの最適化とパフォーマンスを向上させることができます。
未使用のインタラクションを整理すると、削除されるトリガーを選択することはできませんが、削除または保持するアニメーションを選択できます。未使用のトリガーはすべて、未使用のインタラクションを整理する際に削除されます。
注意: アニメーションが要素またはページのトリガーに関連付けられていない場合にのみ、アニメーションを完全に削除することができます。まず、インタラクションパネル内の要素やページトリガーからアニメーションを削除し、次にサイトからアニメーションを削除してください。
未使用のトリガーやアニメーションを整理するには：
- インタラクションパネルに移動します
- パネルの上部にあるClean upをクリックします
- 削除または保持したいアニメーションを選択、選択解除します
- Deleteをクリックします
