Instructions / follow along

So to follow along with this article you can open up your own text editor, but I also created a couple of Sandboxes for you to follow along without having to touch any code yourself.

These are the steps we will be following:

HTML Layout

CSS Animation

That’s all you’ll need 😄

HTML Layout

The way this animation is created, is using a “word” element inside a “wordContainer”. This way, we can position the “word” below the “wordContainer” and use CSS to hide it using “overflow: hidden”.

So we’ll first create a “textWrapper”, which contains the entire sentence we want to display.

<div class="textWrapper">

</div>

Inside of this, we will place a “wordContainer” for every single word of the phrase. This is the container of which we want to hide the overflow.

<div class="textWrapper">

<div class="wordContainer"></div>

<div class="wordContainer"></div>

<div class="wordContainer"></div>

<div class="wordContainer"></div>

</div>

Inside the “wordContainer”, we will place a “word” element, containing the correct word and a non-breakable space character, which allows us to use spaces using flex-box.

<div class="textWrapper">

<div class="wordContainer">

<div class="word">

<p>Introducing <p>

</div>

</div>

<div class="wordContainer">

<div class="word">

<p>Sketch <p>

</div>

</div>

... etc ...

</div>

Using some basic CSS styling, we now have a simple box showing our text