Letter Shuffle Animation for a Menu

Today I’d like to share a little menu animation with you. It’s an experimental play with letters that are stacked vertically and that animate into a menu by shuffling its letters. The resting letters come in with a slight rotation.

Nothing special, really, but I had to get it out of my head and into a demo 🙂  Hope it gives you some inspiration though!

So the page layout looks as follows:

When clicking on the menu icon on the left, the visible letters will shuffle and reveal the final first letter for each of the menu items:

Let’s see how it all looks in a flow:

Note that this is somewhat experimental and only suited for monospace fonts where we have a fixed/equal width for each letter (unless you’re up for some funky layout, then try it with other fonts). Firefox doesn’t play very nicely here because apparently the line-height is not equally interpreted in some browsers. There might be some tinkering needed with paddings/margins to make it fit properly.

Hope you enjoy this and thanks for checking by!