Elastic Stack: Elastic Dragging Interaction

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.

By Manoela Ilic in Playground on
Demo Code

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.

The HTML structure that we are working with is the following:

<ul id="elasticstack" class="elasticstack">
	<li><img src="img/1.jpg" alt="01"/><h5>Saudade</h5></li>
	<li><img src="img/2.jpg" alt="02"/><h5>Tuqburni</h5></li>
	<li><img src="img/3.jpg" alt="03"/><h5>Retrouvailles</h5></li>
	<li><img src="img/4.jpg" alt="04"/><h5>Onsra</h5></li>
	<li><img src="img/5.jpg" alt="05"/><h5>Mamihlapinatapai</h5></li>
	<li><img src="img/6.jpg" alt="06"/><h5>Koi No Yokan</h5></li>
</ul>

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

When the first item gets dragged, we’ll want it to bounce back if it’s dropped too close to the stack. That distance can be define in the variable distDragBack. The area that will make the item disappear when dropped into is defined by the distance set as distDragMax. Dragging the item beyond that distance will automatically release the item from the stack, no dropping necessary. This graphic shows the distances:

ElastiStack

And this is how you can initialize the script:

new ElastiStack( element, {
	// distDragBack: if the user stops dragging the image in a area that does not exceed [distDragBack]px 
	// for either x or y then the image goes back to the stack 
	distDragBack : 200,
	// distDragMax: if the user drags the image in a area that exceeds [distDragMax]px 
	// for either x or y then the image moves away from the stack 
	distDragMax : 450,
	// callback
	onUpdateStack : function( current ) { return false; }
} );

The beautiful illustrations used in the demo are by talented artist Guzk. They belong to the set Memoria de Ataun. Check out the artist’s Behance portfolio and website. Contact us if you’d like to be featured in one of our demos.

We hope you enjoy this experiment and find it useful!

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.

How to Create an Organic Text Distortion Effect with Infinite Scrolling

Creating a Bulge Distortion Effect with WebGL

3D Typing Effects with Three.js

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

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 29

Comments are closed.

  1. I love it! I think I saw a similar effect somewhere a while ago and thought about recreating it but then completely forgot about it. =p

    I also love the images you’re using! <3

  15. Hi Mary Lou, it’s a amazing work! Tks very much for sharing! I was thinking (not try yet), if there is a way to put some “next” and “back” buttons, so, we can drag the image or click on buttons to move to next photo or go back! I was thinking about that because we can move forward on gallery, but if are some photo that we want to see, we need to go through all gallery! If someone has some highlights thoughts about that, plz share =)

  16. Hi!
    Very nice script! Congratulations!
    There is also the possibility to make it work on IE8?
    I met a couple of problems:
    the first, which I resolved, you add the method “call” on that ie8 does not exist in this way:
    (function() { if(navigator.appVersion.indexOf('MSIE 8') > 0) { var _slice = Array.prototype.slice; Array.prototype.slice = function() { if(this instanceof Array) { return _slice.apply(this, arguments); } else { var result = []; var start = (arguments.length >= 1) ? arguments[0] : 0; var end = (arguments.length >= 2) ? arguments[1] : this.length; for(var i=start; i<end; i++) { result.push(this[i]); } return result; } }; } })();
    the second, which I can not fix, it is a mistake “Message: Object doesn’t support this property or method Line: 138 Char: 5” at line 138:
    instance.element.removeEventListener( transEndEventName, onEndTransFn );
    There is a hack to make this wonderful plugin for ie8?

    thanks

  17. Hi It is really nice on. Can you help me to remove the swiped slides data from stack?

  18. Really nice project. I am in a problem with this. I want to get first slid in different background color. How can I do that? Please help me.

  19. Hello,

    It is really nice work, and like it. Could you please help me to add LEFT & RIGHT Arrows ( Button ) for the transition to left and right accordingly.
    I would like to add two button/arrow actions other than the swiping events.

  20. Hi,

    Its Really Great Script. Can you help me to integrate the left and right button click functionality to this application

  21. Hi guys, if you are looking to detect whether a swipe is going left or right, follow these steps :

    STEP 1 : Open elastiStack.js
    STEP 2 : Find ElastiStack.prototype._onDragEnd
    STEP 3 : Replace the whole function with the one below :
    ElastiStack.prototype._onDragEnd = function( instance, event, pointer ) { if( this._outOfBounds( instance ) ) { // FOR IF OUT OF BOUNDS DRAG if(instance.position.x > 0){ // RIGHT } else{ // LEFT } return; } if( this._outOfSight(instance) ) { // FOR OUR OF SIGHT DRAG this._moveAway( instance ); if(instance.position.x > 0){ // RIGHT } else{ //LEFT } } else { this._moveBack( instance ); } };

    Enjoy.

  22. hi,

    Is Elastic Stack working for android version 4.1.2? Actually i tried to work on mobile default browser or in my apk.
    But its not working. Can somebody help me out.

  24. tengo un problema al implementarlo con AngularJS, en el ng-repeat, intento mostrar las imágenes de forma dinámica pero no me muestra nada. Por favor espero me puedan ayudar. 🙂

  25. This is a great plugin. Though I am having problems when using it with requireJS. I notice that this is not also compatible with the latest draggabilly plugin (v1.2.4).

    I’m getting this error.
    Error: Script error for: get-style-property/get-style-property http://requirejs.org/docs/errors.html#scripterror

    And it seems that it is loading “get-style-property/get-style-property.js” defined in draggabilly.

    Any help? Thanks!

  26. Hey ML,

    This is neat! thanks alot, I hope that one day I can be as usefull with my code as you are to me and I am sure many others.

  27. Good evening,

    I wanted to make two rolls of photos and add one more tags with photos. Unfortunately it didn’t work. it leaves some space for this roll of photos ,but they aren’t visible. Can anyone help me to solve this problem.

    Thank you in advance!