Draggable + Inertia for lerp image animation

[BenjaminO]

Hello folks 👋,

 

I am using Draggability from desandro (https://draggabilly.desandro.com) in order to create 2 draggable images in a menu. I have set a lerp effect to them which I find super nice. It works well but I am looking to optimize my code and I think that draggable + inertia plugin can gave me a better results in term of performance. If you have some ideas or advises for building these draggable images using gsap plugins, it would be super nice ! (example of my code using Draggability is on the codepen link)

Thank you all,

Benjamin

See the Pen dyJVpBM by benjamOD2 (@benjamOD2) on CodePen

[BenjaminO]

+ I would like to create a "return in the drag area" effect when the user drag the image outside it's parent container or when the window is resized to avoid "loosing" my images (it happens after the image is dragged). 

 

 

[Cassie]

Heya! Thanks for being part of club GreenSock!

 

So I think the thing to take a look at here is getting the velocity from InertiaPlugin...

https://greensock.com/docs/v3/Plugins/InertiaPlugin/static.getVelocity()

Here's an example of updating skew values with velocity...

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

 

The only missing piece is draggable 👀 Why don't you give it a shot and report back!

[BenjaminO]

I created the instance with the draggable plugin but I don't know which approach I should use to implement the skew effect on both axis x and y

I tried without success :

onDrag: InertiaPlugin => skewSetter(clamp(InertiaPlugin.getVelocity() / -50)),

Also I didn't succeed to have the image lerp effect on drag.

See the Pen GRydOmN by benjamOD2 (@benjamOD2) on CodePen

[OSUblake]

Hi Benjamin, 

 

You have to pass in the target and property you want to get the velocity.

 

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

 

 

[GreenSock]

Here's an approach that has the "lerping" effect and automatically stops the skew updates when appropriate: 

See the Pen NWXMzXN?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I'm using a proxy element for the "real" drag and put a red border around it just so you can see what's happening (obviously get rid of the border for the real version). Then I'm using the new quickTo() feature to animate the box to the proxy's position. 

[BenjaminO]

WoW thank you both for your responses, the results are super nice 😊 ! I changed a bit the code by adding skewY and introducing some resistance to throwing.

I was wondering how to increment zIndex when the user start dragging the image. I know from the doc (https://greensock.com/docs/v3/Plugins/Draggable/static.create()) that there is a natural zIndexBoost when the element get pressed/touched (which is ok for me) but it doesn't seems to work in my example 🤔.

 

I tried a workaround with this type of code without success:

let zIndex = 1;
this.drag = Draggable.create(proxy, {
   ...
   onDrag() {
    this.grab.style.zIndex = zIndex++;
   }
}

See the Pen GRydOmN by benjamOD2 (@benjamOD2) on CodePen

[BenjaminO]

Update : I have a weird bug for setting the proxy position and dimensions. It seems that it is reduce to a "point" in top left corner of the container. I set up the border to 10px for you to see the example. The problem is that container bounding is based on proxy position and not the "actual image" so I can't drag top or left 😳.

 

 

 

[BenjaminO]

Hello ! 👋 

After some research I fixed the problems I had. for the proxy I moved the style setting into the OnPressInit function in order to always refresh size and position of the proxy before dragging.

      onPressInit() {
        ...
        gsap.set(proxy, {width: Image.offsetWidth, height: Image.offsetHeight, position: "absolute", pointerEvents: "none", top: Image.offsetTop, left: Image.offsetLeft, border: "1px solid red"});
      },

I disabled zIndexBoost because it was affecting the proxy divs and not the images. Also I added this OnDragStart function to reinitiate zIndex of all images to 1 first, and then set the zIndex of actual dragged image to 2.

onDragStart() {
  gsap.timeline()
    .set(".img-drag", {zIndex: 1})
    .set(Image, {zIndex: 2});
},

Thank you again all for your help and support, I really appreciated it ! 😉

See the Pen GRydOmN by benjamOD2 (@benjamOD2) on CodePen

[GreenSock]

Glad you got it figured out. I updated my demo to use the zIndex boosting in an onPress (no need to wait until the user starts dragging). 

 

See the Pen NWXMzXN?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Happy tweening/dragging!