Tip: Setting up animations and effects in Studio.Design
In Studio.Design, you can create animations, effects, and other motion-based expressions using conditional styles.
When you set both a default style and a conditional style on a box element, the difference between them plays as an animation. You can fine-tune how the animation behaves using three settings: Easing, Duration, and Delay.
The "Scroll" conditional style lets you create effects where elements move as the user scrolls.
Steps to create a loading-style animation
A loading-style animation is created by applying conditional styles to a box that covers the entire screen.
By temporarily bringing the box to the front on load and adjusting the opacity and delay, you can create a splash screen effect that looks like the site is loading.
Step 1: Add a parent box for the entire animation
Open the Design Editor, then add a new page or open an existing one from the Pages panel
.Add a box to the page. Open the Add panel
, go to the [Basic] tab, and select [box] to add it to the page.In the right panel, select the [Box] tab and set the box size (width and height) under [Layout]. If the panel is closed, open the right panel first.
Width: 100%
Height: 100vh
Step 2: Add a background box
Add a background box inside the parent box you created in Step 1.
Open the Add panel
, go to the [Basic] tab, select [box], add it to the page, then move it inside the box from Step 1 to create a parent-child box structure.In the right panel, select the [Box] tab and set the box size (width and height) under [Layout]. If the panel is closed, open the right panel first.
Width: 100%
Height: 100%
Under [Appearance], set the [Background color] to black using the color palette.
Step 3: Add text, logos, or other content
Add the text, logos, or other elements you want to display inside the box you created in Step 2.
Use the Layers panel to check where you're adding each layer, and add the appropriate boxes for each element.
If needed, apply conditional styles to the elements you added to set up animations.
To create an animation like the one shown in this article, refer to the following guide:
Step 4: Set default and conditional styles on the background box
Select the background box you added in Step 2. If you're having trouble selecting the right box, use the Layers panel.
Set the default style.
In the right panel, select the [Box] tab and set the [Opacity] under [Appearance] to 0%. If the panel is closed, open the right panel first.
Next, set the conditional style.
Click [Conditional Style] in the upper-right corner of the right panel and select [On Appear].
Scroll to the top of the panel, select [Custom Settings], and configure the following. The animation duration is set as a starting point — feel free to fine-tune it later when previewing.
[Appearance] Opacity: 100%
[Animation] Duration: 3 seconds, Delay: 3 seconds
Step 5: Set default and conditional styles on the parent box
This setting makes the parent box appear in front of everything right when the page loads, then move to the back once it returns to its default state.
Select the parent box you added in Step 1.
Set the default style.
Change the box's position and stacking order as follows:
Position: Fixed
Stacking order: -3
Next, set the conditional style.
With the parent box still selected, click [Conditional Style] in the upper-right corner of the right panel and select [On Appear].
Scroll to the top of the panel, select [Custom Settings], and configure the following. The animation duration is set as a starting point — feel free to fine-tune it later when previewing.
Stacking order: 5
[Animation] Duration: 0 seconds, Delay: 5 seconds
Step 6: Preview your settings and publish
Click the arrow button (Preview button) in the upper-right corner of the editor to open the Live Preview, and fine-tune your settings as needed.
Once all your settings — including other design elements — are complete, publish or update your site to apply the changes to the live version.
splash
splash screen
loading page