How to Use the Typewriter Effect

In this article I'll help you add typewriter effects to your text elements to really bring those ads to life.

This effect can be a real attention thief!

Nico, CX Specialist | Zuuvi 

Nicoline_Circle_Portrait

Follow the step-by-step guide in the video below to learn how to do it yourself in Zuuvi Studio.

 

 

Alright! How did it go?

You should end up with something like this if you followed the steps in the video.

 
Typewriter Gif

 

An efficient way to make your ads seem alive, interesting and catchy.

 
Prefer Reading the Guide?

Below you'll find the guide from the video written out step-by-step.

 
 
How to make a Typewriter Effect with Text Elements and Rectangles
  • Begin by adding your text element(s) and fill in the text.

  • Then, add rectangle elements to create overlays (boxes covering the text). The number of overlays (boxes) should be equal to number of text lines.
    All overlays must have the same color as your 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 video-example, we have added 700 px.

Best practice is to add the px of the format's width minus the number of px from the X coordinates (the overlay placement - see the values in the editing menu on the right).

 

Let's Resize (If Needed)

But hold on - it might be good to go already!

Click play, and check before doing this step.

 

If resizing is needed, use these settings:
  • Direction: "End with"

  • Values; Width: 0; Height: 0.

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

Check the screenshot of what the animation board should look like right here. 

Resize
 
That's it!

Happy ad-creation! 😎