This content originally appeared on Codrops and was authored by Mary Lou
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!
The post Letter Shuffle Animation for a Menu appeared first on Codrops.
This content originally appeared on Codrops and was authored by Mary Lou
Mary Lou | Sciencx (2022-03-23T11:25:45+00:00) Letter Shuffle Animation for a Menu. Retrieved from https://www.scien.cx/2022/03/23/letter-shuffle-animation-for-a-menu/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.