You can embed pre-made animations from LottieFiles' Free Animations or Lottie Marketplace, or embed animations you've created yourself using Lottie animation tools such as After Effects, Lottie Creator, or Lottielab.
What is Lottie?
Lottie is a JSON-based animation file format. The file size is small, and you can create interactive animations that respond to scrolling, clicking, and more.
For more details about Lottie animations, check out the official page below.
How to embed Lottie in Studio.Design
(1) Get the Lottie Asset Link
Log in to LottieFiles and go to the Dashboard.
https://lottiefiles.com/
Click "Upload animations" to upload an animation file from your computer, or pick a pre-made animation from Free Animations or Lottie Marketplace and download it to your dashboard.
Open the animation file in the dashboard and click Handoff & Embed.
Turn on Enable asset CDN.
Copy the Asset link. You can choose any Asset link format—it doesn't matter which one you pick.
(2) Embed Lottie in the Studio.Design editor
Open the Studio.Design editor.
Click the [Add] icon in the left navigation.
Click the [Basic] tab.
Under [Embed], click the [Lottie] embed box.
A Lottie embed box will be placed on the screen.
(3) Enter the Lottie link
Paste the Asset link you copied from the Lottie dashboard.
Click the box you placed in step (2).
Select the [Lottie] tab in the right panel. If the right panel is closed, please open it.
Paste the link you got in step (1) into the [Asset link] input field.
You can also add the Asset link to a CMS property and select that property in the editor.
Note: If the embed isn't working properly and a ⚠️ icon appears
Try changing the Asset link format to "Lottie JSON," get the Asset link again, and try embedding it once more. Depending on your situation, changing the format may resolve the issue.
Set playback conditions
Select a Lottie embed box and open the [Lottie] tab in the right panel to set the [Playback condition] and customize the details based on that condition.
Below, we'll introduce the settings available for each playback condition.
(1) Autoplay
This is the default playback condition. The animation plays automatically.
Setting | Details |
Loop playback | When turned on, the animation plays repeatedly. |
Playback speed | Set the playback speed. Pick from the options shown or enter any value you like. |
Player | You can show the player on your site. |
(2) Play on hover
The animation plays when you hover the cursor over the box.
Setting | Details |
Area selection | Specify the target box for the playback trigger. |
Loop playback | When turned on, the animation plays repeatedly. Note: this can't be set when "Smooth reverse" is turned on. |
Smooth reverse | When the hover ends, the animation smoothly returns to its initial state. |
Playback speed | Set the playback speed. Pick from the options shown or enter any value you like. |
Player | You can show the player on your site. |
(3) Play on click
Playback starts when you click the Lottie box. If you click while the animation is playing, it restarts from the beginning.
Setting | Details |
Area selection | Specify the target box for the playback trigger. |
Loop playback | When turned on, the animation plays repeatedly. |
Playback speed | Set the playback speed. Pick from the options shown or enter any value you like. |
Player | You can show the player on your site. |
(4) Play on appearance
The animation plays once when the target box enters the browser's visible area.
Setting | Details |
Delay | Set how long to wait after the trigger (appearance) before playback starts. Pick from the options shown or enter any value you like. |
Loop playback | When turned on, the animation plays repeatedly. |
Playback speed | Set the playback speed. Pick from the options shown or enter any value you like. |
Player | You can show the player on your site. |
(5) Scroll-linked
The animation plays based on browser scrolling.
Setting | Details |
Player | You can show the player on your site. |
(6) Cursor-linked
The animation plays based on the cursor's position.
Setting | Details |
Area selection | Specify the target box for the playback trigger. |
Direction | Choose the direction of cursor movement: horizontal or vertical. |
Player | You can show the player on your site. |
Set a playback trigger (Area selection feature)
For Lottie animations with playback conditions set to [Play on hover], [Play on click], or [Cursor-linked], you can specify a different box as the animation trigger.
Example: Creating a play button
If you want to control the animation using a play button placed separately from the Lottie embed box, follow these steps.
Prepare a box to use as the play button.
Select the play button and open the [Settings] tab in the right panel. If the right panel is closed, please open it.
Enter any string in the ID field.
Select the Lottie embed box.
Open the [Lottie] tab in the right panel. If the right panel is closed, please open it.
Set the playback condition to [Play on hover].
Click [Area selection] and choose the ID of the box you set as the play button.
Now, the animation will play when you hover the mouse over the play button.
