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

Nicoline Gotschalk Dalgaard avatar
Written by Nicoline Gotschalk Dalgaard
Updated over a week ago

A typewriter effect is cool and makes the users curious about what's coming up next πŸ€“

Follow the step-by-step guide below and create your creative design with a typewriter effectπŸ‘‡

How to make a typewriter effect with text elements and rectangles

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

  2. Then add rectangle elements to create overlays (boxes to cover the text) for the same amount of text lines. All overlays (boxes) need to have the same color as the background color.

Add the following animations to overlays

  • Move

  • Resize (if the overlay can't overlap other elements behind or next to the text)

Let's start with the "Move" animation

Animation Settings:

  • Direction: "End with"

  • X Value: In the example we have added 700 px. Best practice is to add the px of the formats width minus the number of px from the X coordinates (the overlay placement - see the values in the editing menu to the right).

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: 0.

Let the resize animation start at the same time as the move animation.

See how the animations should look on the animation board below.

Happy building πŸ‘

Did this answer your question?