A little animation for a big menu where the letters of a word shuffle to become the first letter of each menu item.
From our sponsor: Try Mailchimp today.
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!
