Inline to Menu Link Animation

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

The post Inline to Menu Link Animation appeared first on Codrops.


This content originally appeared on Codrops and was authored by Mary Lou

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.

The post Inline to Menu Link Animation appeared first on Codrops.


This content originally appeared on Codrops and was authored by Mary Lou


Print Share Comment Cite Upload Translate Updates
APA

Mary Lou | Sciencx (2021-06-23T11:15:17+00:00) Inline to Menu Link Animation. Retrieved from https://www.scien.cx/2021/06/23/inline-to-menu-link-animation/

MLA
" » Inline to Menu Link Animation." Mary Lou | Sciencx - Wednesday June 23, 2021, https://www.scien.cx/2021/06/23/inline-to-menu-link-animation/
HARVARD
Mary Lou | Sciencx Wednesday June 23, 2021 » Inline to Menu Link Animation., viewed ,<https://www.scien.cx/2021/06/23/inline-to-menu-link-animation/>
VANCOUVER
Mary Lou | Sciencx - » Inline to Menu Link Animation. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/06/23/inline-to-menu-link-animation/
CHICAGO
" » Inline to Menu Link Animation." Mary Lou | Sciencx - Accessed . https://www.scien.cx/2021/06/23/inline-to-menu-link-animation/
IEEE
" » Inline to Menu Link Animation." Mary Lou | Sciencx [Online]. Available: https://www.scien.cx/2021/06/23/inline-to-menu-link-animation/. [Accessed: ]
rf:citation
» Inline to Menu Link Animation | Mary Lou | Sciencx | https://www.scien.cx/2021/06/23/inline-to-menu-link-animation/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.