Here's how to set up a typing-style animation in Studio.Design where text appears one character at a time.
Tip: Setting up animations and effects in Studio.Design
In Studio.Design, you can create animations, effects, and other dynamic 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 the animation behavior with 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 typing-style text animation
In this article, we'll use the text "BAKE SOMEONE HAPPY" as an example to set up a typing-style animation. The key is to place each character in a separate box and gradually increase the delay for each one.
Step 1: Add a parent box
Open the Design Editor and add a new page or open an existing one.
Add a box to the page. Open the Add panel
, go to the [Basic] tab, and add a [box] to the page.
Step 2: Add text one character at a time and set conditional styles
Open the Add panel
, go to the [Basic] tab, and add a [Text] element to the page.Place the text box inside the parent box you added in Step 1.
Change the text to "B".
In the Right Panel, use the [Typography] settings to set the font, size, weight, color, and more. If the panel is closed, open the Right Panel.
For details, refer to these help articles:
With the text box selected, click [Conditional Styles] in the upper-right corner of the Right Panel and choose [On Appear].
Select [Custom Settings] and configure the following. Adjust [Duration] and [Easing] as needed.
Set [Opacity] under [Appearance] to 0%
Set [Delay] under [Animation] to 0.8 seconds
Step 3: Add the remaining characters
Use copy and paste to repeat the same setup for all the characters in "BAKE SOMEONE HAPPY".
Copy and paste the "B" text box you set up in Step 2.
Select the parent box and change the arrangement direction to horizontal.
Change the text to "A".
With the text box selected, click [Conditional Styles] in the upper-right corner of the Right Panel and choose [On Appear]. If the panel is closed, open the Right Panel.
In the On Appear style settings, configure the following:
Set [Opacity] under [Appearance] to 0%
Set [Delay] under [Animation] to 0.9 seconds (0.1 seconds more than "B")
Repeat the same steps for every character in "BAKE SOMEONE HAPPY".
Increase the [Delay] for each character by 0.1 seconds more than the previous one.
Step 5: Set the parent box size to auto
Set the parent box size to auto so it adapts well to responsive layouts.
Select the parent box and go to the [Box] tab in the Right Panel. If the panel is closed, open the Right Panel.
Under [Layout] settings, set the box size (width and height) as follows:
Width: auto
Height: auto
Step 4: Adjust the layout for each line
Group the text boxes for each word: "BAKE", "SOMEONE", and "HAPPY".
Select the parent box and set spacing using the gap setting.
Next, group "BAKE" and "SOMEONE" together.
Place "HAPPY" below "BAKE SOMEONE".
Select the parent box and change the box alignment to "Horizontal: Left" and "Vertical: Center" to adjust the layout.
Step 6: Review 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.
Once you've finished all your design settings, publish or update your site to make the changes live.