Inline to Menu Link Animation

An experimental inline-to-menu-link animation based on a concept by Matthew Hall.
InlinetoMenuLink_feat

From our sponsor: Experience a seamless creation process from concept to production with advanced design features on Editor X.

Inspired by this fantastic Dribbble shot by Matthew Hall, I wanted to experiment with this kind of inline link to menu block animation. So here’s a little experimental effect that does exactly that and then shows some images.

Here is Matthew’s original animation:

“Image Carousel” by Matthew Hall

With the focus on recreating the inline link to menu link animation, I also wanted to explore some kind of animations on the images. I found the staggering appearance the most fitting on here, but there are lots of possibilities.

So, the initial content view looks as follows:

When clicking on one of the inline links, each link moves to the right while all the other text moves to the left and disappears:

So here’s the result of the whole concept:

I really hope you enjoy this and find it inspirational!

Thanks for checking by and let me know your feedback @crnacura or @codrops.

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Stay up to date with the latest web design and development news and relevant updates from Codrops.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.