Inline to Menu Link Animation

Date:


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

From our sponsor: Convert designs into clean, developer-friendly React, Vue and HTML code with Anima.

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:

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.





Source link

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Share post:

Subscribe

spot_imgspot_img

Popular

More like this
Related

What is a bounce rate and why does it matter

Bounce rate is one of the most critical...

Develop Faster JS Apps: the Ultimate Guide to Web Workers

In this tutorial, we’ll introduce web workers and...

Web Design & Development News: Collective #741

Would you like to send us some news? The...