Typewriter effect

in Webflow without code


This is some text

1) Basic principles

In this tutorial I will focus on the important elements.Here is the link to the example if you prefer to see and understand by yourself.

The basic principle of this effect in Webflow is to use a cache to gradually reveal the text content.  We also add a blinking cursor to reinforce the typed effect. To start, here is the structure.

2) The wrapper

The "Text Block" and the "cache" are contained in the "typeriting-wrap" and inside the "cache" is the "cursor".

Important for the wrapper:

- Display flex horizontal.
- Width in "em" which allows the block to adapt when you change the size of the typeface. The width of the element is set according to the length of the text on which the effect is applied.
- The overflow is hidden so that the cache that is moved does not cover adjacent elements
- Relative position because it contains elements in absolute position.

3) The Text Block

- The width is set to 100% to occupy all the space of the wrapper
- The typeface is set to 1em, we will set the value of the typeface in pixel on the wrapper

4) The cache

The cache is in absolute position and it is set in width and height to 100%, so it will cover the whole text block.

4) The cursor

Like the cache it is a div in absolute position. This div has a 2px left border that we will flash to simulate a cursor.

5) Text animation

The success of the effect lies in the adjustment of the effect, unlike what we usually do, here we will create a jerky animation.

As you can see on the screenshot, the duration of the animation is set to 0, we just use a delay.

IMPORTANT: the movement is set in % which avoids having to modify the animation when we change the size of the typeface.

TIPS: we create the first animation then we duplicate it by right-clicking on the animation, it goes much faster.

6) Cursor animation

We create an animation on the cursor, where we change the color of the border from black to white and we set this animation to loop.

Link to the project so you can see how everything works


I am a Webflow expert based in Paris and working remotely. You can check my "demo tape" and you can contact me for your Webflow projects.