From our sponsor: Meco is a distraction-free space for reading and discovering newsletters, separate from the inbox.
Today we’d like to share a little draggable experiment with you. The idea is to show a strip of differently sized images that can be dragged. When clicking and holding to drag, a title element appears and the images get scaled. This separates the images and gives the whole thing an interesting look. When a number gets clicked, the same separation happens and then the images fly up. Another larger version of the images slides in from the bottom.
The animations are powered by TweenMax and we use Dave DeSandro’s Draggabilly.
The initial view looks as follows:
When we click to drag the image strip, we show the title:
When clicking on a number, we slide the images up and show a larger view with some content:
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
Here’s a preview of the whole thing in motion:
We hope you enjoy this experiment and find it useful!
References and Credits
- Fonts used in the demo: FF More Pro and Fleisch Wolf
- TweenMax by Greensock
- Draggabilly by Dave DeSandro
- imagesLoaded by Dave DeSandro
- Images from Unsplash.com
