Tip: Setting up animations and effects in Studio.Design
In Studio.Design, you can create motion-based expressions like animations and effects using conditional styles.
When you apply both a default style and a conditional style to a box element on your site, the difference between them plays as an animation. You can fine-tune how the animation moves using three settings: easing, duration, and delay.
Under "Scroll" in conditional styles, you can also set up scroll-based effects where elements move as the user scrolls.
How to create a loading-style animation
You can create a loading-style animation by applying a conditional style to a box that covers the entire screen.
By temporarily bringing the box to the front when the page appears, then adjusting its opacity and delay, you can create a splash screen effect that looks like your site is loading.
Step 1. Add a parent box that will contain all the animated elements
Open the Design Editor and either add a new page from the Pages panel
or open an existing page.Add a box to the page. Open the Add panel
, choose the [Basic] tab, and select [box] to add it to your page.In the right panel, select the [Box] tab, then 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 box that will serve as the background inside the parent box you created in Step 1.
Open the Add panel
, select [box] from the [Basic] tab to 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, then set the box size (width and height) under [Layout]. If the panel is closed, open the right panel first.
Width: 100%
Height: 100%
Set [Background color] under [Appearance] to black using the color palette.
Step 3. Add text, logos, and other elements
Add the text, logos, or other elements you'd like to display inside the box from Step 2.
Use the Layers panel to keep track of the layers you're adding, and add boxes that match the elements you want to display.
If needed, apply conditional styles to the elements you've added to set up animations.
To create the kind of animation shown in this article's example, refer to the following article.
Step 4. Apply default and conditional styles to 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 [Opacity] under [Appearance] to 0%. If the panel is closed, open the right panel first.
Next, set up the conditional style.
Click [Conditional Style] in the top-right corner of the right panel, then select [On appear].
Scroll to the top of the panel, select [Custom settings], and apply the following. The animation timing values here are starting points—fine-tune them when you check the result.
Set [Opacity] under [Appearance] to 100%
Set [Animation] duration to 3 seconds and delay to 3 seconds
Step 5. Apply default and conditional styles to the parent box
With these settings, the parent box appears in the front right after the page loads, then returns to its default state and moves to the back.
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 up the conditional style.
With the parent box still selected, click [Conditional Style] in the top-right corner of the right panel, then select [On appear].
Scroll to the top of the panel, select [Custom settings], and apply the following. The animation timing values here are starting points—fine-tune them when you check the result.
Stacking order: 5
Set [Animation] duration to 0 seconds and delay to 5 seconds
Step 6. Check the result and publish
Click the arrow button (preview button) in the top-right corner of the editor to open the live preview, then fine-tune your settings while watching the preview.
Once everything—including the rest of your design—is set up the way you want, publish your site or update it to apply the changes to your live site.
splash
splash screen
loading page