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!

Tagged with:

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 up to date with the latest web design and development news and relevant updates from Codrops.