All Collections
Workflow and design hacks
How to make a typewriter effect
How to make a typewriter effect

This article will help you to create a typewriter effect on your text element

Emma Pescettini avatar
Written by Emma Pescettini
Updated over a week ago

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

  1. Begin with adding your text element(s) and fill in the text.

  2. 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.

Screenshot 2021-11-24 at 17.04.01

Happy building πŸ‘

Did this answer your question?