Antdev

Wow you rock! Thank you very much! That looks like a great solution which will hopefully work with multiple modals at the same time - which I think it will - only one way to find out!

Hello Probably pushing my luck asking this question but Google has failed me. I am creating an app with gsap with multiple draggable modals for a touch screen app. I am rotating the modals 90 degrees at a time. Just realised that when the modals are at 90 degrees, the finger movement to scroll the text within the modal is wrong. I have to move my finger up and down to make the scrolling text scroll. So the finger movement is the same as it would have been if I had not rotated the modal. Obviously not ideal! If one of you clever people have any bright ideas I am all ears (and tears if I can't get this to work) Thanks Ant edited to add that the app will be on a table top screen so users can approach it from all 4 sides hence the need to rotate.

It would be awesome if you could add multi-touch functionality to Draggable to prevent the need to use Interact JS or Hammer JS - appreciate this is a big ask and the target audience for touch screen apps may not be big enough to justify the development time - however I was always told if you don't ask, you don't get so I am asking

Hey Cassie that link you just posted appears to be behaving! I even added a few more draggbles into the mix and still behaving. Oh fab, that means I could at least use a gsap only solution if the client is happy with rotation and scale via a button. Thank you so much Cassie.

Thanks Cassie, that is useful to know about the template literal too.

Update to say I tried the solutions suggested in the threads you kindly shared. Unfortunately these suggestions did not resolve the issues. I did test the gsap Draggable demo (https://codepen.io/GreenSock/pen/ALgdjV?editors=1010) on my touch screen monitor and experienced the same issue. Just to clarify, on the Throw demo, to replicate the issue, simply place one finger on the left hand side of the draggable and another finger on the right hand side - the draggable jumps from left to right probably from one finger to the next and back again etc. I will give Interact JS a go as I do ultimately need to add rotation and possibly some pinching to scale the modals too so I think I would struggle with gsap for this though I could consider just adding buttons to my modals that the user presses to rotate 90 degrees at a time or to scale up and down between 2 values but I would need to crack this issue with the draggable jumping between the two fingers and then just flying off. Just in case it is helpful, my draggable code is as follows: Draggable.create(".modal', { type:"x,y", edgeResistance:0.7, inertia: true });

No problem at all. I am impressed enough that you are responding on a Saturday morning. I am glad I am not the only one working on Saturday

Hey Cassie, you have come to my rescue again - thank you. I will give this a go and report back shortly.

I am creating an app to be used at an exhibition on a touch screen PC and using gsap Draggable. All was working fine on my desktop PC (Windows 10 | Chrome) with mouse and normal monitor. This app will allow multiple users - each dragging different elements. However when I hooked up a touch screen monitor I have discovered if I touch the draggable element with 2 fingers - it behaves erratically (jumps around) which is not going to be acceptable so I need to work out my options. Do I remove gsap Draggable and try another library such as HammerJS or InteractJS in the hope they will place nicely with multitouch. Or is there a code solution where I can prevent this multitouch issue and just ensure it works fine no matter how many fingers touch the draggable element but only act on one of these fingers (hope that makes sense) I don't think a hardware solution is on the cards. Thanks Ant p.s I have not included a codepen as assume peeps won't have a PC touch screen to test on. I am pretty sure the same issue happens with the Draggable demos

Doh! If I put my glasses on and read the documentation I would have read this: To use a variable in a relative way, simply add the "+=" or "-=" prefix, like {x: "+=" + yourVariable}. https://codepen.io/antdev/pen/vYpMzzj

Hello Need a little help with some syntax. I want to change the x position of an element by a dynamic amount but can't get the syntax correct. x:"+=variable" doesn't work, nor does x:+=variable Thanks Ant p.s apologies for the text formatting - I could not remove it function doThatThing() { gsap.to(".square", {x:"+=100, duration:2"}) } function doThatThingVariable() { const amount = 100 gsap.to(".square", {x:"+=amount, duration:2"}) }

Thank you mvaneijgen - just wanted to check there wasn't some sort of yoyo behaviour to do this or something along those lines. My code is working fine so happy to move on.

Stupid question probably but just curious if there is a better way (one line perhaps) to scale an element up then scale back down again to less than 100%. My timeline code works but as I am new I just wanted to check there wasn't a better way to write the code for this. Thanks Ant

Oh my you guys really do rock! That is an amazing response rate!! Thank you, that works a treat! Ant https://codepen.io/antdev/pen/qBpvXaX?editors=1010

Hello I want to display 10 elements that are constantly rotating but I would like to start them each of a different rotation. My tests so far are resulting in the rotation resetting when it gets to the end of one spin. See https://codepen.io/antdev/pen/ZEvLNaa What am I doing wrong? Thanks Anthony

Oh yes you have really helped me on this occasion to meet my deadline. Really appreciated.

Thank you very much Jack. That is exactly what I was after. Thank you also for the explanation - that is really helpful. I must say you Greensock folk offer amazing support for your amazing product - even on a Sunday!

Hello I have created a separate post for this even though it is related to my earlier post today which I have marked as solved as wasn't sure if anyone looks at solved posts. You can see in this codepen example (the one with the red square) , that as you drag to the left the value of this.x decreases. However when I stop dragging and start a new drag it appears to reset the this.x rather than continuing to decrement where I left off. Outside of vue (the example with the blue square), I find it just continues decreasing this.x getting into greater negative numbers. See https://codepen.io/antdev/pen/gOoKXPa Any idea why this is not the case in vue? Thanks Ant

Thank you so much Cassie for coming to my rescue. I spent hours on this with no success going round in circles.

Hello I am putting together an app using vue js 3 and gsap using the Draggable plugin. I am having an issue with the value of this.x within the updateProgress not being defined. Please take a look at my codepen: https://codepen.io/antdev/pen/abEKWpL If anyone has some knowledge of using gsap with vue and can help me resolve this issue I would be very grateful. I am creating a carousel and had it all working outside of vue but bringing it into vue has caused me this issue. Hopefully just a scoping issue that there is a fix for. Thanks Ant

Thank you Nico for the link.

Hi there I am creating a carousel where the items move and scale. I have hard coded it using some buttons to illustrate the movement and scaling using buttons to move between elements. I would like to implement "swiping" functionality as this will be used only on a touch screen device. So I would like it to be a seamless loop too so if the user keeps swiping it loops. And ideally I would like it so if the user drags the carousel moves with the finger either left or right depending on the finger movement direction. I am pretty sure Draggable and Scroll Trigger are my friend here but I am not sure how best to hook these into the required animation. Note I will have different bottles in the finished application. If you can give me any tips on how best to implement this it would be much appreciated. Here is a codepen I have created. https://codepen.io/antdev/full/XWVawyK You will need to maximise this to see it properly. Thanks Ant

Thanks OSUblake - I will have a play around and update this thread if I have any success

Thank you - that makes sense now about needing to change the transformOrigin every time the user clicks on the modal. What if the modal had a small area that was effectively the "trigger" which was the only area the user could drag the modal with. Would that make the task of using draggable simpler to achieve this? For example the white square in this codepen (that does not work in the slightest btw) https://codepen.io/antdev/pen/rNpMpod

Thank you OSUblake for your reply. I obviously would much prefer to use gsap as my solution rather than an obscure library. I need to combine this functionality with other gsap functionality so it would have been great if this was something simpler out of the tin. I am curious what you mean about the transform origin needing to be calculated on every press. Surely there would only be one press where the user presses down on the modal then it would behave like the fish as the user drags the modal? I am sure I am misunderstanding you here so apologies for being dumb.