Here's how to create a typewriter-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 create motion effects like animations using conditional styles.
When you apply both a default style and a conditional style to a box element on your site, the difference between the two is played back as an animation. You can fine-tune the animation's movement using three settings: easing, duration, and delay.
The "Scroll" option under conditional styles lets you create effects where elements move as the user scrolls.
How to create typewriter-style text
In this article, we'll set up a typewriter animation using the text "BAKE SOMEONE HAPPY" as an example. The key is to place each character in a separate box and increase the delay slightly 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
and add a [box] from the [Basic] tab to the page.
Step 2. Add text one character at a time and set up conditional styles
Open the Add panel
and add a [Text] element from the [Basic] tab 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 choose the font, size, weight, color, and other options. If the panel is closed, open the right panel first.
For details on these settings, check out these help articles:
With the text box selected, click [Conditional Style] in the top right of the right panel and select [On Appear].
Select [Custom Settings] and configure the following. You can also 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
Using copy and paste, apply the same settings to spell out "BAKE SOMEONE HAPPY".
Copy and paste the "B" you set up in Step 2.
Select the parent box and change the layout direction to horizontal.
Change the text to "A".
With the text box selected, click [Conditional Style] in the top right of the right panel and select [On Appear]. If the panel is closed, open the right panel first.
In On Appear style mode, configure the following:
Set [Opacity] under [Appearance] to 0%
Set [Delay] under [Animation] to 0.9 seconds (0.1 seconds more than "B")
Repeat these steps for every character in "BAKE SOMEONE HAPPY".
Increase the [Delay] for each character by 0.1 seconds compared to the one before it.
Step 5. Set the parent box size to auto
Setting the parent box size to auto makes it easier to handle responsive layouts.
Select the parent box and choose the [Box] tab in the right panel. If the panel is closed, open the right panel first.
Under [Layout], 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 "BAKE", "SOMEONE", and "HAPPY" separately.
Select the parent box and set spacing using the gap value.
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 fine-tune the layout.
Step 6. Check your settings and publish
Click the arrow button (Preview button) in the top right of the editor, then fine-tune your settings while watching the live preview.
Once you've finished all your design and other settings, publish your site or update it to push the changes live.