Exploring Animations for Menu Hover Effects

Last week I showed you how we can create a fancy menu hover animation with images. Today I’d like to share some of the interesting effects we can achieve with that technique. Tuning some variables, timings and filters, the possibilities are really endless, so I invite you to explore some of the things we can come up with in the these couple of demos....

9h

Collective #612

Inspirational Website of the Week: Sennesro Simplicity, elegance and flowy motion made us pick Sennesro as inspirational website this week. Get inspired 60 Days of Animation The Undead Institute offers books on HTML, CSS, Responsive Design and more that marry humor, excellent teaching, and brain-lodging practice for an experience that’ll...

6d

Creating a Menu Image Animation on Hover

At Codrops, we love experimenting with playful hover effects. Back in 2018, we explored a set of fun hover animations for links. We called that Image Reveal Hover Effects and it shows how to make images appear with a fancy animation when hovering items of a menu. After seeing the fantastic portfolio of Marvin Schwaibold, I wanted to try this effect...

1w

UI Interactions & Animations Roundup #8

It’s time for a crisp new collection of inspirational UI interaction and animation shots! This time we have Aristide Benoist’s works stand out with some very creative motion ideas and there’s some wonderful mobile animations, too. We hope you enjoy this set and get inspired! The Secret Project — 002 by Aristide Benoist ...

2w

Inspirational Websites Roundup #16

Today, I have a fresh websites roundup for you, packed with really fantastic designs that will hopefully get you up-to-date on the current trends and inspire you for new projects. We are always looking for new stuff so don’t forget to share any designs you like or created via @codrops. And now, I hope you enjoy these brilliant web experiences...

2w

Collective #611

Inspirational Website of the Week: Chiara Luzzana It couldn’t have been a better match between amazing sound and stunning visual design! Our pick this week. Get inspired The Return of the 90s Web Max Böck writes about some trends that suggests we might just have come full circle. Read it Our Sponsor Create WordPress...

2w

A Glitchy Grid Layout Slideshow

I love experimenting with irregular layouts. I wanted to try to take this custom “background” grid one level further and add a stack-like navigation effect. I liked how it turned out but there was some Jazz missing. It was calling for some dramatic effect, like a glitch animation! So I added it and it was the missing bit indeed. So, here it...

2w

Awesome Demos Roundup #16

With the fantastic ScrollTrigger plugin that the great folks of GSAP released some time ago, we’ve been blessed with many awesome scroll demos that are nothing short of creativity and that show what cool things are possible by simply scrolling a page. Take a look at these and other playful and inspiring demos; we hope you enjoy this special selection!...

3w

Collective #610

Inspirational Website of the Week: Superfluid Superfluid’s web store design is an exciting clash of colors and motion. Our pick this week. Get inspired Our Sponsor 15 Tools and Services Worth Checking Out Looking for web design tools or services? Here’s a curated list for you. Discover them now Tutorialist A great...

3w

Making Stagger Reveal Animations for Text

Thibaud Allie made this wonderful animation which you can see live on the site of Dani Morales. It happens when you click on “About” (and then “Close”). This kind of show/hide animation on the typographic elements is being used in many designs lately. At Codrops we call it a “reveal” animation. I fell in love with that lettering effect...

3w