Hover Motion Intro Animation

A little hover motion effect on a grid and an intro animation.

I have a real appreciation for websites that incorporate playful interactive visuals; they add a distinctive character to a brand and create an engaging experience for visitors. Recently, I came across sink.design, where they aptly refer to these visuals as “Play.”

Just click on it and you’ll see a new experiment every time. One of these experiments is the following:

Rows of text move in sync with your mouse movements, which is quite impressive, especially since the entire setup is rotated. I couldn’t help but imagine how it would look with an image grid instead of text, so I gave it a try and added some filter animations. Additionally, I thought about how this effect could serve as an introductory animation on a webpage, revealing content upon clicking an enter button. For that I drew some inspiration from a Dribbble shot by Nick Hart.

This is how the hover motion looks like:

When clicking the button to enter, the center image goes fullscreen and the content moves in.

Hope you enjoy this little mashup and find it inspirational!

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!