Inline to Menu Link Animation

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

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:

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

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.

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 in the loop: Get your dose of frontend twice a week

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!