Dynamic Bounds

[Wouter11]

Hi!

 

Recently I ran into Ueno's website and their about section is using GreenSock to display a gallery of photo's. But the thing is they have their bounds setup in a pretty unique way. The whole draggable section is overflowing but comes to a stop at a certain point.

 

You can experience this by dragging the photo's underneath the "At your service" section.

 

I would like to achieve a similar effect so that it is overflowing but still uses bounds when I scrolled to far. The problem is, I'm not sure where to begin. Anyone that can point me in the right direction or shoot me an example of how to do this?

 

All other examples are using fixed bounds where the draggable layer can move in. 

 

If anything is unclear, please notify me and I'll try to extend this post with more info. 

[Sahil]

Trick is to set maxX to 0 and minX to viewport width minus container width.

 

You can apply bounds on resize using applyBounds method on resize so your content can be responsive.

 

See the Pen WXwNPK?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

[Carl]

Hi and welcome to the GreenSock forums,

 

I dug around and think I found the effect you were mentioning https://ueno.co/about

 

I think what you are referring to is edgeResistance like how the pictures bounce back when you drag too far.

By setting the minX and maxX bounds on the Draggable we can tell it how far it can be dragged. 

 

Here is a small demo I whipped together which should help

 

See the Pen GOZgwY by GreenSock (@GreenSock) on CodePen

 

 

Check out Draggable and Draggable Docs

 

If you are trying to do something else, please clarify and we will do our best to help.

[Carl]

Nice job, Sahil. Didn't see your answer.

[Wouter11]

Wowowow. That were some fast replies with great examples!

 

First of all thanks for that! I wasn't aware of the fact that we could set minX and maxX values. The sample didn't really do the trick for me so I rewrote it on my end like this;

 

var lastItemX = lastItem.offsetWidth + lastItem.offsetLeft
var minx = -1 * (lastItemX - pageSize.offsetWidth - pageSize.offsetLeft);
var maxx = 0;

Draggable.get(gallery).applyBounds({minX: minx, maxX: maxx});

 

So the minX bound is located off screen somewhere on the left based upon the length of the gallery. The maxX is 0 and that seems to hold it in place when dragging to the right. 

 

I'm still in doubt about this approach. It works but I'm not so sure if this is the best way to handle it. What I basically have are some offsets on the gallery. It overflows on the right and it should stop when you drag it to far to the left. That is the main issue I'm trying to solve. 

 

 

Update: 

Was just fiddling around with the example Carl provided and by removing some overflow:hidden I got the exact same effect I was looking for. Will dig into that example a bit more.

 

Update 2:
Fiddled a little longer with Carls' example but as soon as I start using relative widths on the slides the logic is breaking. 

 

See the Pen bYpaLO by wouter125 (@wouter125) on CodePen

[Sahil]

Ya you can post a reduced demo with what you have done, it will be a lot easier for us to respond and explain.

 

If you mean the offset on left and right on that site, it is just some extra padding to the container that is being dragged. When I say viewport, I wanted to say any div that will act as window to display your slides. It can have actual width of viewport/window or it can be 50% or anything. The container's width is then used to set minX and maxX. I guess that should clarify.

 

See the Pen XzdVQN by Sahil89 (@Sahil89) on CodePen

 

[Wouter11]

Just updated my previous post with a small codepen!

[Sahil]

Quote

Update 2:
Fiddled a little longer with Carls' example but as soon as I start using relative widths on the slides the logic is breaking. 

 

That is small issue with calculation, wait.

 

EDIT: Because window is larger than width of container, minX was being set to positive value. Meaning it was being set to right from it's position, it can be resolved by checking if minX is larger than 0 or by checking if window is larger than container and set minX to 0.

 

See the Pen rYepXW?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

[Sahil]

Ignore my last reply. If you want to set relative widths, it will have to be done with totally different approach. If it contained only images like your example you posted, then our approach will work.

[Sahil]

Here is the demo where you can use relative width.

 

See the Pen EbKJRy?editors=0011 by Sahil89 (@Sahil89) on CodePen