ElastiStack is a little script that let’s you navigate through a stack of items by dragging away the first one. It comes with an elastic touch meaning that when dragging the top-most item, the other ones will follow as if they were connected elastically. When reaching a certain distance, the dragged item will release itself and the next item will pop out.

Today we’d like to share a little script that lets you navigate through a stack of thumbnails with an elastic touch. The idea comes from this Dribbble shot by CreativeDash and the interaction is basically dragging an item up to the point that it “releases” from the stack which it seems to be connected to with an invisible elastic. For the dragging functionality we are using David DeSandro’s Draggabilly.

Three items are visible initially, the main one and the the two next ones, which can be seen because we’ve added some perspective to the item list and translated the two items on the Z-axis. When dragging the top-most item, we’ll also drag those two items along creating the elastic illusion.