From our sponsor: Create stunning brand assets with the help of our AI-powered creative assistant. get started today.

Today I want to share with you a little tooltip transition concept. The main idea is to show a preview of some sort of gallery to rapidly run through the thumbnails while we hover over some link in the text. Visually, this is enhanced with a line animation that “frames” the thumbnail. Once we click on the link, the thumbnail image animates to a larger version. The lines move along and the rest of the thumbnails are animated. In a final step, we can still click on the large image and it will animate to fullscreen view. Thumbnail navigation moves to the bottom of the page.

All of these layout changes feature Greensock’s Flip Plugin, It makes it really easy to move things around and into new levels of content.

Note that this is an experimental concept where gallery navigation is not implemented.

This is the opening scene:

When hovering over a link in the text, the tooltip shows:

The thumbnails in Quick Slide Show are animated. When the link is clicked, the current thumbnail animates the position of the text and expands:

Now we can click on the still large image and it will animate to fill the screen:

And this is how it all comes together:

I really hope you enjoy this little concept and find it inspiring!

pictures are by Google’s DeepMind on Unsplash,