You wanna create a typewriter effect like this? Then follow this step-by-step guide below 👇
Here is the perfect constellation for a typewriter to look a like-effect
Begin with adding your text element(s) and fill in the text.
Then add rectangle elements to create overlays for as many rows as you have text rows. All overlays need to have the same color as the background color.
Okay, let me sum up:
In our example we have a 930x180 format with two rows of text, meaning that we have added two overlays covering each text row.
Add the following animations to overlays
Move
Resize (if the overlay can't overlap other elements behind the text)
Let's start with the "Move" animation:
Settings for animation:
Direction: "End with"
X Value: as much as the banner is long - minus the number of px the overlay starts in (X coordinates).
In our example, the value typed in is 900 px as the overlay is placed in px X=30 (900+30=930 px as the format is)
Let's Resize - if needed. Click play before doing this step. It might be good already! 🥳
Settings for animation:
Direction: "End with"
Values: Width: 0; Height: The original height value.
In our example, the original height of the overlay is px 40. Therefore, the height in the value is also 40.
See how the animations should look on the animation board.
Happy building 👏