BenjaminO Posted April 8, 2022 Share Posted April 8, 2022 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 Link to comment Share on other sites More sharing options...
BenjaminO Posted April 8, 2022 Author Share Posted April 8, 2022 + 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). 2022-04-08_10-43-14.mp4   Link to comment Share on other sites More sharing options...
Cassie Posted April 8, 2022 Share Posted April 8, 2022 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! 1 Link to comment Share on other sites More sharing options...
BenjaminO Posted April 8, 2022 Author Share Posted April 8, 2022 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 Link to comment Share on other sites More sharing options...
OSUblake Posted April 8, 2022 Share Posted April 8, 2022 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   3 Link to comment Share on other sites More sharing options...
GreenSock Posted April 8, 2022 Share Posted April 8, 2022 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. 2 1 Link to comment Share on other sites More sharing options...
BenjaminO Posted April 8, 2022 Author Share Posted April 8, 2022 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 Link to comment Share on other sites More sharing options...
BenjaminO Posted April 9, 2022 Author Share Posted April 9, 2022 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 😳.  2022-04-09_02-12-27.mp4   Link to comment Share on other sites More sharing options...
Solution BenjaminO Posted April 9, 2022 Author Solution Share Posted April 9, 2022 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}); }, 2022-04-09_18-18-59.mp4 Thank you again all for your help and support, I really appreciated it ! 😉 See the Pen GRydOmN by benjamOD2 (@benjamOD2) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted April 9, 2022 Share Posted April 9, 2022 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! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now