追加パネルから追加できる Lottie 埋め込みボックスを活用すると、簡単にLottieをSTUDIOサイトへ埋め込むことができます。埋め込んだLottieは、スクロールに連動して再生するなど再生条件等のカスタマイズが可能です。

LottieはJSONベースのアニメーションファイル形式です。ファイルサイズが小さく、スクロールやクリックなどに反応するインタラクティブなアニメーションが作成可能です。

Lottie アニメーションについて詳しくは、下記公式ページをご覧ください。

Lottieとは？- LottieFiles

LottiesFiles の Free Animations や Lottie Marketplace から作成済のアニメーションを埋め込んだり、Lottie アニメーションを作成できるツール、After Effects、Lottie Creator、Lottielab などで自作したアニメーションが埋め込めます。

STUDIOエディタヘ移動します。追加パネルのボックスから、Lottie埋め込みボックスを選び、任意のページへ配置します。

Lottie ダッシュボードでコピーした Asset link をペーストします。

※CMSプロパティにAsset linkを追加し、エディタ側でプロパティを選択する方法でも設定可能です。

Lottie埋め込みボックスを選択し、エディタの右側にある設定パネルを開くと、再生条件やその条件に応じた詳細なカスタマイズが可能です。

特定の再生条件（例：ホバーで再生）では「エリア指定」が設定できます。これは、再生条件が適用されるエリアを指定する機能で、Lottie埋め込みボックス以外のIDが設定されたボックスを指定することができます。

例えば、以下の画像のように、Lottie埋め込みボックスとは別に再生ボタンを配置し、そのボタンにIDを設定します。

次に、再生条件を「ホバーで再生」に設定すると、「エリア指定」項目が表示されます。ここでIDを選択すると、再生ボタンにマウスをホバーした際にアニメーションが再生されます。

「指定なし」を選択すると、再生条件の対象はLottie 埋め込みボックスとなります。

再生条件別に設定できる項目をご紹介します。

デフォルトの再生条件で、アニメーションが自動で再生されます。

カーソルでボックスにホバーした際に、再生されます。

Lottieボックスをクリックすると再生開始します。アニメーション再生中にクリックすると、初期状態から再度、再生開始します。

対象ボックスがブラウザの表示領域に入ると一度のみアニメーションが再生します。

ブラウザのスクロールに応じて再生します。

カーソル位置に連動して再生します。