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.
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.
- 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
The cache is in absolute position and it is set in width and height to 100%, so it will cover the whole text block.
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.
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.
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.