Antdev

Thanks Jack. Yes the delta Values were not the same as the other physics libraries emitted but adding the offset seems to resolve things for the dragging. I do appreciate these values being wrong are not a gsap issue but I want to use gsap as part of the solution and know you peeps are experts in all things related to this so it was a desperate post to try and move my forward in a moment of need.

Just to update, InteractJS didn't turn out to be a good solution for the multitouch - there is a known issue where a finger on the screen breaks all other interactions. So I have aborted using that.

Thank you for getting back to me Jack In this codepen you can see the issue as follows: https://codepen.io/antdev/pen/ExQXKLG Drag the square to the right hand side Let go of your mouse and click away from the square Drag the square again a short distance. Instead of the square dragging a short distance it instead jumps back to its initial position and is offset a short distance from there The gsap connection - I am moving the square with gsap. I wanted to know why it was jumping back to the initial position and offsetting from there. Something to do with how it does transforms behind the scenes. I would love to use Draggable but I need rotation and pinch zoom too which gsap doesn't do unfortunately. ContactJS is helping me capture all the touch gestures but I want to use gsap for the movement. I have a full Greensock Membership so was hoping you could help me as you are always reallly helpful in my times of need. Thanks Ant

I have saved the last x position in a variable and then every time there is a new pan I add this value to the offset. This appears to stop the jumping. Not sure if it is the best solution that gsap offers for this scenario? let lastX = 0; let lastY = 0; var pointerListener = new PointerListener(domElement, options); domElement.addEventListener('pan', function(event){ // transform var x = lastX + event.detail.global.deltaX; var y = lastY + event.detail.global.deltaY; gsap.set(domElement, {x:x, y:y}); }); domElement.addEventListener('panend', function(event){ lastX = lastX + event.detail.global.deltaX; lastY= lastY + event.detail.global.deltaY; }); https://codepen.io/antdev/pen/KKQqNvX?editors=1011

Thanks Jack - apologies I had listed the wrong codepen demo - I have updated it so you can see the issue now. It seems like the first time you drag it, it works correctly. Then if you remove your finger or release mouse then do it again - it jumps.

I have been jumping from one physics library to the next trying to get multitouch dragging working on a multitouch screen with multiple users. I initially tried HammerJS but that had issues, then I tried InteractJS and that didn't work if you put a finger anywhere on the table then tried to interact with the modals that the users can move around. I am now trying ContactJS which is proving the best of the lot - it is a fork of Hammer. https://biodiv.github.io/contactjs Anyway my app will have dragging (panning), rotation and pinch zoom but initially I am just trying to get the panning working with gsap. I have included my codepen. The first time you drag the square it works fine. Subsequent drags are resulting in the square jumping to a position away from the finger. What appears to be happening is when I subsequently try to move it, it uses the squares original initial position still and offsets against this. Hence the jump? Well that is my guess. var x = event.detail.global.deltaX; var y = event.detail.global.deltaY; gsap.set(domElement, {x:x, y:y}); global.deltaX : Number, // traveled distance along the x-axis in px, whole contact duration global.deltaY : Number, // traveled distance along the y-axis in px, whole contact duration live.deltaX : Number, // traveled distance along the x-axis within the last 100ms in px live.deltaY : Number, // traveled distance along the y-axis within the last 100ms in px I tried the following too which stops the jumping on subsequent moves but it moves it way too much and it flies off the screen var x = event.detail.live.deltaX; var y = event.detail.live.deltaY; gsap.set(domElement, {x:"+=" + x, y:"+=" + y}); I can see after dragging the square to the right it has the following transform If I then just drag it a few pixels to the left it jumps back to its original position and offsets a few pixels from this original position to the left. So how does gsap correctly translate the subsequent movements? I really need to get this working asap so any help would be much appreciated. Thanks Ant

I worked it out - doh!! gsap.set("#knob", { rotation: 0 });

Hello I am trying to reset the rotation of a draggable that rotates. Hope you don't mind me grabbing one of your examples to amend to show you my issue. I have different levels in my game that use the same draggable ring. So for a new level I want to reset the rotation to zero. My attempts are failing. I am sure I am just doing it wrong. I am trying to do it using gsap.set(draggable, {rotation: 0}); Any help much appreciated. Thanks Ant

Unfortunately yes it is a requirement and I am on the home run now fortunately. I will think twice next time about using typescript with gsap

Thanks again Blake - I need to read up more on typescript as my lack of knowledge has really hampered me with this project. However I believe the advantages it has brought me in organising all the data that populates my apps was worth the pain I am suffering. It is just frustrating when you are up against the clock to get stuck for days on a line of code

Anyway yeah I agree your solution is the best option and I will go with that as I have several apps with this kind of stuff in it and I don't want to get stuck again

Ah OK thanks Blake tho interestingly I have no problem with the following in my app baseTl: gsap.timeline(), animation:gsap.timeline(), then in mounted I have this.baseTl = gsap.timeline({ paused: true }); this.animation = gsap .timeline({ repeat: -1, paused: true }) .add(this.baseTl.tweenFromTo(1, 2));

Thank you Blake for your dedication to helping me solve this conundrum. I think I will stick with the solution setting it as an array as that feels cleaner to me. myDraggable: Array<Draggable>(), Hopefully there is no issue doing it this way? Many thanks Paul

Thanks Blake - much appreciated.

OK I have made some progress setting myDraggable to an Array of Draggable as I am aware the Draggable.create returns an array Then I needed to pass this.myDraggable[0] in my updateProgress function call Still confused why the other way didn't work that worked in CodeSandbox didn't work in my app instance but at least now I can happily disable my draggable Be still interested if you so look at the zip I uploaded if you discover anything but either way thank you very much for your timely responses. data() { return { myDraggable: Array<Draggable>(), proxy: document.createElement("div"), }; }, mounted() { this.init(); }, methods: { init: function () { this.myDraggable = Draggable.create(this.proxy, { trigger: ".wrapper", type: "x", inertia: true, resistance: 0.75, dragResistance: 0.75, onDrag: () => this.updateProgress(this.myDraggable[0]), }); }, updateProgress(myDraggable) { var debug = document.getElementById("debug"); debug.innerHTML = "draggable.x: " + myDraggable.x; }, disableDraggable() { this.myDraggable[0].disable(); }, },

No joy - with that so have attached a zip ERROR in src/App.vue:30:7 TS2322: Type 'Draggable' is not assignable to type '"string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function"'. Type 'Draggable' is not assignable to type '"function"'. 28 | methods: { 29 | init: function () { > 30 | this.myDraggable = Draggable.create(this.proxy, { | ^^^^^^^^^^^^^^^^ 31 | trigger: ".wrapper", 32 | type: "x" 33 | })[0]; ERROR in src/App.vue:37:24 TS2339: Property 'disable' does not exist on type '"string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function"'. Property 'disable' does not exist on type '"string"'. 35 | disableDraggable() { 36 | alert("disable draggable"); > 37 | this.myDraggable.disable(); | ^^^^^^^ 38 | } 39 | }); 40 | </script> debugApp.zip

Thank you very much Blake. I will try that now. If that doesn't work I will send you a zip. Thanks again

Thanks Blake I am curious when you say that I don't need myDraggable and proxy in data. If I remove myDraggable from data I get an error TS2339: Property 'myDraggable' does not exist on type 'ComponentPublicInstance<{} | {}, {}, { I tried using the new Draggable syntax but when I set the type of myDraggable in data to Draggable I still get the error Issues checking in progress... ERROR in src/App.vue:241:7 TS2739: Type '_Draggable' is missing the following properties from type 'typeof _Draggable': prototype, version, zIndex, create, get 239 | 240 | > 241 | this.myDraggable = new Draggable(this.myProxy, { | ^^^^^^^^^^^^^^^^ 242 | trigger: ".scrollTarget", 243 | type: "x", 244 | inertia: true, With regards the bit about whether typeof Draggable works, can you clarify how I would test this - do I add console.log(typeof Draggable) in say the mounted function?

Thanks Blake for confirming the TODO code is not the issue. I did as you suggested and created a CodeSandbox test that includes my code from my app https://codesandbox.io/s/competent-moon-6dykbv?file=/src/App.vue I am not experiencing the issue in this CodeSandbox test but still having the issue on my actual app where when I try to set the type of my draggable instance to Draggable I get the error: TS2739: Type 'Draggable' is missing the following properties from type 'typeof _Draggable': prototype, version, zIndex, create, get > 495 | this.myDraggable = Draggable.create("#work-wheel4", { this.myDraggable = Draggable.create("#work-wheel4", { trigger:".myTrigger", type: "rotation", inertia: true, resistance:0.7, dragResistance:0.7, onDrag: () => this.updateProgress(this.myDraggable), onThrowUpdate: () => this.updateProgress(this.myDraggable), onThrowComplete: () => this.endThrow() })[0]; I have installed the latest bonus file and ran npm install ./gsap-bonus.tgz My import statements are as follows: <script lang="ts"> import { defineComponent } from 'vue'; import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; import { InertiaPlugin } from 'gsap/InertiaPlugin'; import { Draggable } from 'gsap/Draggable'; import Config from './config.json'; gsap.registerPlugin(Draggable, InertiaPlugin, ScrollTrigger); And this is where I set the data property export default defineComponent({ name: 'App', data(){ return { myDraggable: Draggable, Any idea why I am getting this error

I wonder if the issues I am having with setting the type as Draggable is related to this in draggable.d.ts readonly scrollProxy: any; // TODO: Create interface I am pretty sure I have the latest version of gsap

Thank you very much That does indeed disable the draggable in my test on codepen. https://codepen.io/antdev/pen/WNMNJvw Though on my actual app I have the following: this.draggable = Draggable.create(this.proxy, { ... })[0]; So this.draggable.disable(); should have worked. Many thanks Ant

Hello You peeps rocked with helping me previously with a typescript gsap related issue so reaching out again after hours of pulling my hair out. I am using typescript and vue and gsap in my app. I need to disable a draggable but struggling how to store a reference to my draggable so I can disable it. I tried using the following which resulted in "Property 'disable' does not exist on type '{}' when I called this.draggable.disable() data() { return { draggable: {}, proxy:new HTMLDivElement() } } And also the following which resulted in the following error: Type 'Draggable[]' is missing the following properties from type 'typeof _Draggable': prototype, version, zIndex, create, and 3 more data() { return { draggable: Draggable, proxy:new HTMLDivElement() } } Any help would be much appreciated so I can manage to disable my draggable. Thanks Ant

Just in case it is useful to anyone else, I have managed to get gsap and InteractJS playing nicely together to enable rotating and dragging with gsap taking care of the setting the properties. interact(modal) .gesturable({ listeners: { start (event) { angleScale.angle -= event.angle }, move (event) { let currentAngle = event.angle + angleScale.angle; let currentScale = event.scale * angleScale.scale; gsap.set(event.target, {rotation:currentAngle}); gsap.set(event.target, {x:'+=' + event.dx}); gsap.set(event.target, {y:'+=' + event.dy}); }, end (event) { angleScale.angle = angleScale.angle + event.angle angleScale.scale = angleScale.scale * event.scale } } });

Hmm well I am now. I did notice the github version had the observer in types but mine didn't so after failing to manually add these I ran npm install gsap and wow and behold it fixed it. Thank you Cassie.

I have successfully imported Draggable and Inertia into my Vue JS app but for some reason I am getting an error trying to import Observer. I am getting an error: This dependency was not found: * gsap/Observer in ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/ts-loader??ref--14-1!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader-v16/dist??ref--1-1!./src/App.vue?vue&type=script&lang=ts import { gsap } from 'gsap'; import { Observer } from 'gsap/Observer'; import { Draggable } from 'gsap/Draggable'; import { InertiaPlugin } from 'gsap/InertiaPlugin'; import interact from 'interactjs' gsap.registerPlugin(Draggable); gsap.registerPlugin(InertiaPlugin); gsap.registerPlugin(Observer);