You can easily embed a Lottie into your Studio site by using the Lottie embed box that can be added from the Add Panel. You can customize the settings of the embedded Lottie, such as playback in conjunction with scrolling.
What is Lottie?
Lottie is a JSON-based animation file format. Lottie is a JSON-based animation file format that is small in size and can be used to create interactive animations that respond to scrolling, clicking, and other actions.
For more information about Lottie animations, please see the official page below.
How to embed a Lottie in Studio
You can embed created animations from Free Animations or Lottie Marketplace in the LottiesFiles. You can also use tools to create your own Lottie animations, such as After Effects, Lottie Creator, or Lottielab and embed them.
1. Get a Lottie Asset Link
login to LottiesFiles and access the Dashboard.
https://lottiefiles.com/
Click "Upload animations" to upload an animation file you have on hand, or choose an animation that have already created from Free Animations or Lottie Marketplace and download it to your dashboard.
Open the animation file in the Dashboard and click on Handoff & Embed.
Turn on Enable Asset Link.
Copy the Asset link.
2. Embedding a Lottie in the Studio Editor
Go to the Studio editor. Select the Lottie embed box from the Add panel box and place it on any page.
Paste the Asset link you copied from the Lottie dashboard.
*It can also be set by adding an Asset link to the CMS properties and selecting the property on the editor side.
Customizing a Lottie
Select the Lottie embed box and open the settings panel on the right side of the editor for detailed customization of playback conditions and their corresponding criteria.
Area select
For certain playback conditions (e.g., playback on hover), an "area specification" can be set.
This is a function that specifies the area to which the playback condition applies, and allows you to specify a box with an ID other than the Lottie embedded box.
For example, as shown in the image below, a playback button can be placed separately from the Lottie-embedded box, and an ID can be set for that button.
Next, set the playback condition to "Play on hover" and the "Specify area" item will appear. If you select an ID here, the animation will play when you hover the mouse over the play button.
If you select "Unselected," the play mode will be applied to the Lottie embed box.
Play mode
The following are items that can be set for each play mode.
Autoplay
The animation will play automatically.
Setting Item | Details |
Loop | When it’s on, the animation will play repeatedly. |
Speed | Playback speed can be specified. Select from the choices displayed or enter any value. |
Controls | Players can be displayed on the site. |
Hover
Plays when hovering over the box with the cursor.
Setting Item | Details |
Area select | You can specify the target box for playback conditions. |
Loop | When it’s on, the animation will play repeatedly. Note that this cannot be set if "Smooth Return" is on. |
Reverse playback | Smoothly returns to the initial state when the hover is released. |
Speed | Playback speed can be specified. Select from the choices displayed or enter any value. |
Controls | Players can be displayed on the site. |
Click
Clicking on the Lottie box starts playback. Clicking on the Lottie box during animation playback will start playback again from the initial state.
Setting Item | Details |
Area select | You can specify the target box for playback conditions. |
Loop | When it’s on, the animation will play repeatedly. Note that this cannot be set if "Smooth Return" is on. |
Speed | Playback speed can be specified. Select from the choices displayed or enter any value. |
Controls | Players can be displayed on the site. |
Appear
The animation plays only once when the target box enters the browser's display area.
Setting Item | Details |
Delay | Specify how much delay from the trigger (when it appears) to start playback. Select from the options or enter an arbitrary numerical value. |
Loop | When it’s on, the animation will play repeatedly. Note that this cannot be set if "Smooth Return" is on. |
Speed | Playback speed can be specified. Select from the choices displayed or enter any value. |
Controls | Players can be displayed on the site. |
Scroll sync
It plays as the browser scrolls.
Setting Item | Details |
Controls | Players can be displayed on the site. |
Cursor sync
Playback is linked to the cursor position.
Setting Item | Details |
Area select | You can specify the target box for playback conditions. |
Direction | You can choose the direction in which the cursor moves, either horizontally or vertically. |
Controls | Players can be displayed on the site. |