EdgeResistance..

[li6zy]

Hi!

 

I want to add an animation in edgeResistance.

in other words, is there a option which detect the moment of touch between browser's edge and the element?

Expected action:
When I drag the element to the browser's edge,
the more I push the element to the edge, the smaller it gets.
keep drag to the right => width become smaller.
keep drag to the bottom => height become smaller. 
 

Thank You!

[PointC]

If you're talking about Draggable — no there isn't an out-of-the-box option that will just do that for you.

 

I guess you'd have to get the width/height of the window or container and keep track of the x/y of the draggable element. Based on that you can then change the transform-origin and squash it accordingly.

 

Happy tweening. 

[GreenSock]

Yep, I'd do it the way @PointC suggested.

 

As far as sensing if/when it goes beyond the edge of the browser, there is a hitTest() method that MIGHT be useful. https://greensock.com/docs/Utilities/Draggable/static.hitTest() Like...you could use the threshold of "100%" so that if any part of it goes outside the document, you know. For example, in your onDrag it could look like:

 

onDrag:function() {
  if (!this.hitTest(document.documentElement, "100%")) { //or you could probably use "body" as a selector.
    console.log("hit the edge!")
  }
}

 

But you could also go the "pure" route of using getBoundingClientRect() and compare it to the window's size to sense when it hits the edge. And like @PointC said, you'd need to figure out the logic for scaling it in whatever way you want, based on the location. That doesn't sound trivial to me, but I'm sure it's doable. 

 

Good luck!

[li6zy]

Oh I solved! Thank you for your quick, helpful anwser.^0^

I didn't use hitTest() this time, but I think I will use in another function!

 

onDrag: () {

   if ($el.offsetWidth > Math.round($body.offsetWidth - $el._gsTransform.x)) {
       TweenLite.set($el, {width: $body.offsetWidth - $el._gsTransform.x});
   }

}