Animating text like Sketch does using only CSS

As a front-end developer/designer, I mostly use Figma or Adobe XD at my place of work. Recently though, I found myself wanting to try out Sketch. Landing on their homepage, there was a staggering text animation happening. As a small challenge to myself, I tried recreating it and sharing this process with you.

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.

CSS Animation

Now to the good part.

First, we set every “wordContainer” to hide its overflow.

.wordContainer { overflow : hidden ; }

Then, we position every single “word” down using the transform property.

.word { transform : translateY ( 115% ); }

Next, we can create an animation which positions the “word”s to their original position.

@keyframes up { 100% { transform : translateY ( 0% ); } }

And finally, we call the animation on the “word”s and add some animation-delay to create a staggering effect.

.word { animation : up 0.8s ; animation-delay : 1.2s ; animation-timing-function : cubic-bezier ( 0.075 , 0.82 , 0.165 , 1 ); transform : translateY ( 115% ); } .wordContainer:nth-child ( 2 ) .word { animation-delay : 1.35s ; } .wordContainer:nth-child ( 3 ) .word { animation-delay : 1.5s ; } .wordContainer:nth-child ( 4 ) .word { animation-delay : 1.65s ; }

And that’s it! We did it 🎉

Now this is a very static way to do this, and it can be built using Javascript to dynamically create these elements, but this was just a quick way of demonstrating how to recreate this effect.

Thank you for reading!