Tooltip to Gallery Transition | Codrops

From our sponsor: B28192607 Tooltip to Gallery Transition | Codropsskeleton Tooltip to Gallery Transition | CodropsCreate 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:

Tooltip 01 Tooltip to Gallery Transition | Codrops

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

Tooltip 02 Tooltip to Gallery Transition | Codrops

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

Tooltip 03 Tooltip to Gallery Transition | Codrops

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

Tooltip 04 Tooltip to Gallery Transition | Codrops

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,

5 upcoming web design trends for 2023

This Post Has One Comment

Leave a Reply