HOW TO: Looping Block Reveal Effects

Add a little “pizzazz” to your site ✨

I’m sure we’ve all seen the effect. A block slides in, slides out and reveals some text. Simple enough when we only want to animate in some content. Can even achieve that with only CSS. But what about when we want to loop between content? From one phrase to the next for example.

It gets a little trickier.

For those in camp TL;DR, you can check out the code in the CodePen collection at the bottom of the article 👍 All the code required is available there 👍

Pure CSS with no loop.

Let’s start by creating a pure CSS block reveal with no loop.

This will give us a better understanding of the problem we face when we want to start looping. We can reuse some stuff too 👍

Let’s start with the markup.

All we need is a container with elements for each block of text we want to reveal.

Now for the styling 👍

Our container will use display: inline-flex. This is so we can keep our text blocks stacked whilst the container takes up as little space as possible. This gives us more flexibility when it comes to incorporating our block reveal into a layout. We might also consider using display: grid 👍

Now for the blocks. The trick here will be to use pseudo elements on our span. These can then slide in and out with an animation. We can run a second animation in parallel that reveals the text content 👍