Draggable Menu with Image Grid Previews
Publikováno: 19.6.2019
A draggable inline menu with a scattered thumbnail preview of an image grid.
Draggable Menu with Image Grid Previews was written by Mary Lou and published on Codrops.
After our little draggable image strip experiment, we wanted to explore using the dragging functionality on a menu. The idea is to show a large inline menu with some scattered thumbnails. The menu can be dragged and while doing so, the thumbnails get moved with an animation. Each menu item also changes the letters to show an outlined version. When clicking on the “explore” link under a menu item, the thumbnails move and enlarge to form a grid.
The animations are powered by TweenMax and we use Dave DeSandro’s Draggabilly.
The initial view looks as follows:
When clicking on the explore link, we animate all thumbnails to their place in a custom grid.
You can see it in action here:
We hope you enjoy this menu and find it useful!
References and Credits
- Fonts used in the demo: Niveau Grotesk
- TweenMax by Greensock
- Draggabilly by Dave DeSandro
- imagesLoaded by Dave DeSandro
- Images from Unsplash.com
Draggable Menu with Image Grid Previews was written by Mary Lou and published on Codrops.