Draggable Image Strip

A draggable image strip layout with a content preview powered by Draggabilly and TweenMax.

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.

Attention: Note that the demo is experimental and that we use modern CSS properties that might not be supported in older browsers.

The initial view looks as follows:

DraggableImageStrip_01

When we click to drag the image strip, we show the title:

DraggableImageStrip_02

When clicking on a number, we slide the images up and show a larger view with some content:

DraggableImageStrip_03

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:

DraggableImageStrip.2019-06-11 11_54_43

We hope you enjoy this experiment and find it useful!

References and Credits

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay in the loop: Get your dose of frontend twice a week

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!