Letter Shuffle Animation for a Menu

A little animation for a big menu where the letters of a word shuffle to become the first letter of each menu item.

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!

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay in the loop: Get your dose of frontend twice a week

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!