Tooltip to Gallery Transition
source link: https://tympanus.net/codrops/2022/12/07/tooltip-to-gallery-page-transition/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Tooltip to Gallery Transition
A concept for page transitions where a tooltip image animates to a gallery layout and fullscreen image.
From our sponsor:
Today I’d like to share a little tooltip transition concept with you. The main idea is to show a preview of some sort of gallery with a rapid run through the thumbnails while we hover over some link in a text. Visually, this gets enhanced with a line animation that “frames” the thumbnail. Once we click the link, the thumbnail image animates to a larger version. The lines move along and the resting thumbnails animate in. In one last step, we can still click the bigger image and it will animate to a fullscreen view. The thumbnail navigation moves to the lower part of the page.
All these layout changes are facilitated by GreenSock’s Flip plugin. It makes it really simple to move things around and into new levels of content.
Note that this is an experimental concept where the gallery navigation is not implemented.
This is the initial view:
When hovering the link in the text, the tooltip shows:
The thumbnails get animated in a quick slideshow. When clicking on the link, the current thumbnail animates to the position of the text and enlarges:
Now we can still click on the larger 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 inspirational!
The images are by Google’s DeepMind on Unsplash.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK