Split Flap

We live in the 21^st century and we no longer have signs that work like this:

This board, while obviously inferior to a digital display in many ways, has a lot of appeal. Instead of projecting pixelated LED light into your retinas, it’s actually moving and reflecting natural light. There’s something to the infinite resolution on this thing.

As an ode to the train stations of my childhood, I bring you a skeuomorph split-flap web component:

If you want a text animation that lasts way too long and will surely kill all your K.P.I.s, you can do it in two steps using the <hotfx-split-flap> custom element. First add this script to your page:

Then just wrap your message in the custom element, like so:

<hotfx-split-flap>Your message here</hotfx-split-flap>

That’s all it takes and the transition will start as soon as your readers scroll the component into the viewport.

Set Some Attributes

The custom element accepts a few attributes to control the output:

• width is the number of characters shown in one line.
• height is the number of lines shown.
• speed is the duration of the transition from one letter to another with a default of 150 milliseconds.

Here’s a playground for you to build your own split flap board.

If you don’t specify height and width for your board, the element will take the height and width of the first message inside of it. If you later change out the message, it will be truncated to fit in the same grid. The first demo gets around this by creating a new element when the text doesn’t fit.

How Does This Even Work?

To get these flaps flappin, the web component splits the string of text inside of it and makes four copies of each character, split into the current and next characters in the animation each divided in half using clip-path. Then to do one flap, it simultaneously rotates down the top half of the current character and the bottom half of the following one.

After one animation, the element will swap out the characters and start the next animation and so on. A key CSS property is backface-visiblity: hidden, which keeps the letters from showing through to the other side of their elements.

Style It!

This wouldn’t be much fun if we couldn’t make it look totally weird. The main way to get your hooks into this thing are with the ::part() pseudo elements. There are a lot of them, so here’s a list for you:

• There’s a bounding box for each letter, called ::part(char) and that’s useful for adding a shadow or nudging their location in the grid.
• Each letter is divided into flaps and those are available to you at ::part(flap). These are where you set the color of the letter and the background color. N.B. if you add transparency here, you’ll see the jarring swap of characters between each flap.
• Then there’s a divider line inside each flap that’s at ::part(divider).
• Each of the above pseudo elements can be used to address individual characters on each row. So ::part(flap-1) is the first character in each row.
• There’s more! Each of the above (char, flap, divider) can also be used to address each character using row and column, so ::part(char-2-4) is the fourth character on the second row.
• Finally, there’s one CSS variable that changes the spacing of the grid, --hotfx-split-flap-grid-gap and that sets the gap property for the element’s CSS grid.

That’s a lot of elements so you can do some pretty neat stuff.

Internationalization

There’s another attribute named characters which lets you control the alphabet of characters shown on the flaps. Here’s one in Russian, showing the titles of some of Tolstoy’s novels.

I’m swapping out the message on the board every few seconds using a simple callback scheduled with setInterval. Use the source, Luke.

Rolling Forward

There’s not much of a roadmap for this component, but I’m open to ideas. I would love to see whole words shown on one flap just like the destinations in the video of the train station board at the top of the post. An event that fired when the animation finished might be useful for chaining these animations together as well.

Can you think of other improvements? Of course, if you have bugs or feature requests, please file a new issue on GitHub.