How to make a typewriter effect

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

You wanna create a typewriter effect like this? Then follow this step by step guide below 👇

HubSpot Video


Here is the perfect constellation for a typewriter look a like - effect

  1. Begin with adding your text element(s) and fill in 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 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 like on the animation board.

Screenshot 2021-11-24 at 17.04.01

Happy building 👏