LottiesFiles の Free Animations や Lottie Marketplace から作成済のアニメーションを埋め込んだり、Lottie アニメーションを作成できるツール、After Effects、Lottie Creator、Lottielab などで自作したアニメーションが埋め込めます。
Lottieとは
LottieはJSONベースのアニメーションファイル形式です。ファイルサイズが小さく、スクロールやクリックなどに反応するインタラクティブなアニメーションが作成可能です。
Lottieアニメーションについて詳しくは、下記公式ページをご覧ください。
StudioにLottieを埋め込む方法
(1) Lottie の Asset Link を取得する
LottiesFilesへログインし、Dashboard へアクセスします。
https://lottiefiles.com/
「Upload animations」をクリックして手元にあるアニメーションファイルをアップロードするか、Free Animations や Lottie Marketplace から作成済のアニメーションを選び、ダッシュボードへダウンロードします。
ダッシュボードでアニメーションファイルを開き、Handoff & Embed をクリックします。
Enable asset CDN をオンにします。
Asset link をコピーします。Asset link format はどのフォーマットを選択しても問題はありません。
(2) StudioエディタにLottieを埋め込む
Studioエディタを開きます。
画面左のナビゲーションで[追加]アイコンをクリックします。
[基本]タブをクリックします。
[埋め込み]項目から[Lottie]の埋め込みボックスをクリックします。
Lottie埋め込みボックスがスクリーン上に配置されます。
(3) Lottieのリンクを入力する
Lottie ダッシュボードでコピーした Asset link をペーストします。
(2)で設置したボックスをクリックします。
右パネル上で[Lottie]タブを選択します。右パネルが閉じている場合は開いてください。
[Asset link]の入力フィールド内に、(1)で取得したリンクをペーストします。
また、CMSプロパティにAsset linkを追加し、エディタ側でプロパティを選択することもできます。
注意：埋め込みが正常に行われず、⚠️マークが表示される場合
Asset link formatを「Lottie JSON」に変更して、Asset linkを再取得して再度埋め込みをお試しください。ご状況によりフォーマットを変更することで問題が解消される可能性があります。
再生条件を設定する
Lottie埋め込みボックスを選択し、右パネルの[Lottie]タブを開くと、[再生条件]やその条件に応じた詳細なカスタマイズが可能です。
以下では、再生条件別に設定できる項目をご紹介します。
(1)自動再生
デフォルトの再生条件で、アニメーションが自動で再生されます。
設定項目 | 詳細 |
ループ再生 | オンの場合、アニメーションは繰り返し再生します。 |
再生速度 | 再生スピードが指定できます。表示される選択肢から選ぶか、任意の数値を入力します。 |
プレイヤー | プレイヤーをサイト上に表示することができます |
(2)ホバーで再生
カーソルでボックスにホバーした際に、再生されます。
設定項目 | 詳細 |
エリア指定 | 再生条件（トリガー）の対象ボックスの指定ができます。 |
ループ再生 | オンの場合、アニメーションは繰り返し再生します。なお、「なめらかに戻る」がオンの場合は設定できません。 |
なめらかに戻る | ホバーが外れた際に、なめらかに初期状態へ戻ります。 |
再生速度 | 再生スピードが指定できます。表示される選択肢から選ぶか、任意の数値を入力します。 |
プレイヤー | プレイヤーをサイト上に表示することができます |
(3)クリックで再生
Lottieボックスをクリックすると再生開始します。アニメーション再生中にクリックすると、初期状態から再度、再生開始します。
設定項目 | 詳細 |
エリア指定 | 再生条件（トリガー）の対象ボックスの指定ができます。 |
ループ再生 | オンの場合、アニメーションは繰り返し再生します。 |
再生速度 | 再生スピードが指定できます。表示される選択肢から選ぶか、任意の数値を入力します。 |
プレイヤー | プレイヤーをサイト上に表示することができます。 |
(4)出現時に再生
対象ボックスがブラウザの表示領域に入ると一度のみアニメーションが再生します。
設定項目 | 詳細 |
遅延 | 再生開始するタイミングをトリガー（出現時）からどれだけ遅れさせるか指定します。選択肢から選ぶか任意の数値を入力します。 |
ループ再生 | オンの場合、アニメーションは繰り返し再生します。 |
再生速度 | 再生スピードが指定できます。表示される選択肢から選ぶか、任意の数値を入力します。 |
プレイヤー | プレイヤーをサイト上に表示することができます。 |
(5)スクロール連動
ブラウザのスクロールに応じて再生します。
設定項目 | 詳細 |
プレイヤー | プレイヤーをサイト上に表示することができます。 |
(6)カーソル連動
カーソル位置に連動して再生します。
設定項目 | 詳細 |
エリア指定 | 再生条件（トリガー）の対象ボックスの指定ができます。 |
向き | カーソルの動く向きを、水平方向と垂直方向から選べます。 |
プレイヤー | プレイヤーをサイト上に表示することができます。 |
エリア指定機能で再生トリガーを指定する
再生条件を[ホバーで再生]、[クリックで再生]、[カーソル連動]に設定されたLottieは、アニメーションのトリガーとなるボックスを他に指定することができます。
例：再生ボタンの作成
Lottie埋め込みボックスとは別に置かれた再生ボタンでアニメーションを制御したい場合は、以下の方法で作成します。
再生ボタンとなるボックスを用意します。
再生ボタンを選択して、右パネルの[設定]タブを開きます。右パネルが閉じている場合は開いてください。
ID欄に、任意の文字列を入力します。
Lottie埋め込みボックスを選択します。
右パネルの[Lottie]タブを開きます。右パネルが閉じている場合は開いてください。
再生条件を[ホバーで再生]に設定します。
[エリア指定]をクリックし、再生ボタンとなるボックスのIDを選択します。
これで、再生ボタンにマウスをホバーした際にアニメーションが再生されます。
