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.

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!

Source link

Show More


Makes Noise is a blog where you can find all the juicy details on a variety of topics including health and fitness, technology, lifestyle, entertainment, love and relationships, beauty and makeup, sports and so much more. The blog is updated regularly to make sure you have all the latest and greatest information on the topics that matter most to you.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button