Search the Community

Just curious if Draggable now works with EaselJS and Canvas? I found a post from almost 7 years ago where the answer was no, but that was 7 years ago and now I know that GSAP 3 is compatible with EaselJS I even use it inside of Adobe Animate which I do a lot of programming in. But my issues is If draggable is compatible now I am not sure how I can target my movieclips. Draggable.create(Main.MorningTasks.getChildByName(Root.ScheduledTasks.Morning[i].text), { type:'x,y', bounds: Main, onClick: function() { console.log(Task.name); }, onDragEnd: function() { console.log('Released ' + Task.name) } }); Following the example on Draggable Plugin Page, what I have I think should be right. Just looking for some guidance, I love GSAP and would love to be able to use draggable as well.

I have a Draggable demo that displays some odd behavior, especially in Android webview (and Chrome). Here's a list of what I am seeing. Swipe arrow to the right and watch what happens. Do the same in Chrome on Android. If you hold your finger for too long, the click event will fire and detach your finger from the draggable element. I've tried everything I can think of to stop this from happening with no luck. In Chrome for Android, if you are swiping down as you begin your touch, it will almost immediately detach from the .circle element. This behavior does not happen on iOS or with Windows using a touch screen. The draggable circle (.circle) is bounded by the containing element (.drag-channel). It appears that the width of the bounding region is correct, but it is misaligned as it starts at the outside edge of the lefthand border of .drag-channel. Because of that, it stops short of reaching the righthand edge of the .drag-channel. In iOS, if you tap the circle and release really fast (it's hard to do), the background color seems to stick in some kind of intermediate state. I'm not sure if this is an issue with the onPress and/or onRelase events, or an internal issue with css in webkit. If someone with more experience with Draggable could take a look at this for me I would appreciate it greatly. Thanks, Tom

Hello there! I'm not entirely sure this has anything to do with gsap, but I don't know who else to ask. I'm working on an app to play cards, and broadcasting events. I won't bore you with those details. I use Draggable with the onDrag listener, then broadcasting the draggable's style.transform I pick up the changes with this: eventSource.addEventListener("cardPosition", (e) => { const data = JSON.parse(e.data), target = document.getElementById(data.message.id); target.style.transform = data.message.transform; }); This works, but the dom seems to be confused about the position of the element when grabbing it from another client. Attached is a gif showing an example.

I would like to force a rotating drag element to rotate according to the mouse X axis instead of the actual circular move, I don't know if this feature is implemented in Draggable. PS : The slider on the Codepen doesn't affect anything, it's only here to help understand my problem. Thanks!

Here is a question that I was pondering. I was studying the applyBounds() for draggable objects. This allows me to restrict objects to a particular area. Is there a way to restrict objects from an area? In this sample pen - I can keep the three balls in the larger box just fine but what if I want to keep them from overlapping at any time - no matter where they are positioned in the box? I'm not even asking that they push each other around but I would just need to drag around them rather than over them. Did I miss a simple thing somewhere? (Just imagine three baseballs in a shoebox) They cannot occupy the same space at the same time.

Hi, New to GSAP & absolutely loving it so far! Ran into an issue though with Draggable on mobile. It works great on desktop/ipad, but when I try and drag a div horizontally along an svg line on my (old & janky) Motorola, it brings up the context menu (copy/select etc.). I've tried putting in the allowContextMenu explicitly, as below, but it still doesn't seem to latch onto the target (a div). Has anyone encountered this issue before? Any advice/help would be amazing! Sorry I haven't created a codepen - the scenario involves 2 massive svgs and loads of timeline code as well Happy to send a GitHub link privately if that would help? Thanks! Draggable.create('#dragNavigator', { type: 'x', bounds: document.getElementById('container'), allowContextMenu: false, cursor: 'grab', onDragStart: function() { // some code }})

Hi guys, This is my first time working with gsap and I'm running into an issue with my slider. I've created this slider, now it's starting on <div class="first"> on the left. What I'd like to do is to center the slider on <div class="third"> on render. I'd appreciate your help

Having problems with touch on some projects that are using Draggable I am now diving into this. I'm having problems with touch on both rotating draggables as well as translating draggables on several browsers, but Firefox seems to be the most problematic one. This thread though is about a particular draggable issue that only seem to affect Firefox, while other browsers seem to work fine: The codepen included here is, as you can see, as easy as it can get. A svg circle where Draggable is put on with inertia and rotation. Touch in this example is running fine in browsers like Chrome and Ms Edge (chromium based browsers), but touch is not working at all in Firefox (Windows) here. In the codepen I used the actual gsap template from this forum, which is still using version 3.2.3, but I've also seen this beviour in version 3.2.4 locally here. [edit] the touchstart seem to be triggering something in draggable though, because when just moving the mouse after trying to drag with touch, the object gets dragged, eventhough none of the mousebuttons are pressed. Also this issue occurs with Draggable type set to 'x,y' as well as set to 'rotation'

Hello guys! I'm truly new using Draggable product and I'm having a problem that I didn't find any solution on web I want to increase size to my container when the target hits the edge of. Actually, I'm using edgeResistance and it work very well but instead, I need to start a function that verifies the size of container and increase X px to width or height (depends where it hits) There's any option to verify when the target hits the edge and where (x,y)? Thank you

I don't find an example from the draggable knob that does following (based on my codepen live example): - knob is on position 15 percent - I tap (touch) on position 70 percent - knob moves to position 70 percent It is only possible to tap and move (drag) to that position. I don't find anything in your docu. A "simple" answer from you will be "tap or touch" is not "drag". But this doesn't help me. A link that explains what I want. https://radmie.github.io/ng-knob/ My link to my codepen live example. I want only show the missed functionality (compared to the upper example, based on ng-knob). For a review it's to complex. But interesting for you. Hopefully. When you want play with different predefined variants than change line 20 in "JS". https://codepen.io/TirochH/pen/eGqbNL Here a link from a "simple" example from "Greensock" with the same missed functionality (with rotation angle, instead percentage). https://codepen.io/PointC/pen/eWNRpe Hans

"Draggable.min.js:10 Uncaught TypeError: Cannot read property 'getComputedStyle' of undefined" All dependencies are ok ... is it a CSS default or other overlapping issue ?

Hi! I've just discovered GreenSock yesterday and the whole suite of products and it's kinda awesome. Learning the basics is very simple and even more advanced stuff is pretty accessible. But sadly I'm facing an issue with Draggable. I've noticed that it it's not possible to drag an element out of a scrollable div. The element just keeps scrolling in it's own div, but he can't escape it's own div. To clearify the situation: I'm buidling a scrollable bar at the top of the page (which kan be hidden/shown). That bar contains draggable elements that will be dragged onto an element that is somewhere at the bottom of the page. Is it possble to disable some kind of CSS in the onDragStart to allow exiting the scrollable div or something else? This codepen showcases the issue: http://codepen.io/Mattttt/pen/pvYgER Thanks!

I am creating a drag & drop exercise. When the user is done dragging, the dragged object should automatically animate to its target. This works correctly in normal circumstances. However, when the parent container is scaled, the calculation for determining the target position does not work and the dragged object does not land correctly on the target. I thought it might be related to dragging using x and y, so I changed the code to use left and top. I still have the same issue. You can see the issue in the CodePen. The viewport container element automatically resizes to fit the browser window/frame. Note that I use a function called getDocumentRelativePosition (which can be seen in the CodePen) to determine the left and top values of elements, because in practice, the dragged object can be inside a different relative container than the target object. Any ideas?

Hello, how can i achieve multiple list divs? and it the items will drag only inside there own divs Thanks in advance! edit; please excuse my english. edit 2; what i want to achieve is have multiple <div id="list"></div>

I've been updating a working slider to GSAP 3 ? and am getting this breaking error: Cannot read property 'parentNode' of null. I've created a very simplified codepen where you'll see a working draggable box (for posterity) and one that uses a proxy, which causes the error. Could there be a bug in Draggable.js? The culprit is the updateMatrix() function at matrix = getGlobalMatrix(target.parentNode, true);. My proxy doesn't have a parentNode, so we're passing null here to getGlobalMatrix. If we hop over to matrix.js the getGlobalMatrix(element, inverse) function starts with if (!element.parentNode) { ... }. We're already passing the parentNode as element (which is null in my case), so it seems weird to me to check for a second (grand)parentNode. If it's helpful, the original slider was based on @OSUblake's Draggable Auto Slider which uses a proxy div as a target for the draggable. https://codepen.io/osublake/pen/veyxyQ

Very rarely, about 1 out of 100 times (sometimes you have to re-run the pen even), if you try to drag these items around very rapidly (as in click, drag, release and immediately click and drag again, over and over) Edit: to replicate consistently, place the mouse on the last pixel on any edge of DragItem1 (so the very first pixel where your mouse turns into a drag icon), then drag away from that edge (so if you choose bottom edge, drag downward). You will see via the console logs that the PointerEvent target inside onDragStart is a totally non-draggable element. In the onDragPress, the target is correctly '.drag-item', whereas in onDragStart, the target is 'drag-item__wrapper' (and sometimes other elements, depending), which is not a Draggable. I put in a console warning to show when this happens. I feel like this is happening because once the mouse moves 1 pixel away, it is no longer over/touching the drag item but instead over what's under the mouse? So perhaps I should move most my logic out of onDragStart? Screenshot of console below (the error about update() is happening because the target is not a Draggable). Any help is greatly appreciated!

Hi there, in one of the projects i am currently working on, i implemented a "Draggable" (nothing special) to provide some kind of knob for the user. Everything works fine as expected, until the DOM-structure has been changed (unfortunately it has to be that way). The knob now shows some strange behavior. I forked a PEN (https://codepen.io/GreenSock/pen/ywpet -> https://codepen.io/anon/pen/yZMLEV) to show what i mean and only added some HTML and CSS to build a minimal setup. The problem is, that the mouse is not following the knob-handler as precise as before. Does anyone knows this behavior and has some hint for me? Thanks in advance!

Hello I have updated an older project with GSAP 3.0.1 and ran into a strange behaviour. I had used Draggable & ThrowProps plugin before. The new code is just like this: Draggable.create('#test', {type: 'x', inertia:true}); With the new scripts it suddenly threw an error: “Uncaught TypeError: Cannot read property 'scrollWidth' of null at za (Draggable.min.js:1)…” I reduced the project to the single line above for CodePen. It mysteriously worked on CodePen but not offline and not on my local server. This it gave my an idea: I checked the order of JS files and this is where it becomes really strange. On CodePen the scripts are loaded in this order: 1 gsap.min.js 2 Draggable.min.js 3 InertiaPlugin.min.js On CodePen it works. The same order locally throws the error above. The some order locally using type:'x,y' perfectly works!? Actually the only loading order that works locally is: 1 Draggable.min.js 2 gsap.min.js 3 InertiaPlugin.min.js I’m glad that I figured this out because I can continue working on my game but it took hours. Is there an official loading order for the GSAP package or another explanation? Could you play around with a local version and check if you can reproduce the problem? Greetings, Henry PS. GSAP 3 is great anyway.

Hello everyone, First of all, my apologies for my English, because this is not my mother tongue. I’ll try to do my best :) I'm a beginner with javascript. I have multiple box on a page. Each box can be colored by « swiping » it (from the left to the right). The important things are that the box should not move when « swiping »and it shoult be togglable. I successfully made an example with one box (you can see my pen). What i try to achieve is having multiple colored box instead of only one. Each box can be modified independently. But i can't figure out how to do this. (P.S i try to use only vanilla javascript). Do you have an idea to solve this problem? Thank you ?

Hi gang! I'm new to the party but just finished my first GreenSock implementation. Congrats on v3! Seems like I showed up at the perfect time. Once you catch all of the documentation issues (Draggable seems to have literally improved overnight!) this library will truly be my new favourite thing. For example, here is my implementation of a fancy knob that will scrub at variable speed depending on how far you turn it to the left or right. It will scrub even when you're not dragging the knob. Experience gives me the wisdom to recognise that this implementation would not be terse or possible without such a well-thought out API surface. Kudos! knobber (element) { const timeline = gsap.timeline({ repeat: -1, onRepeat: () => { const r = ~~draggable.rotation timeline.repeatDelay(gsap.utils.mapRange(0, 180, 1.0, 0.1, Math.abs(r))) // this.direction(r > 0) } }) timeline.pause() timeline.to({}, { duration: 0.1 }) const draggable = Draggable.create(element, { type: 'rotation', inertia: true, onDragStart: () => timeline.play(), onDragEnd: () => timeline.pause(), snap: () => { return 0 } })[0].applyBounds({ minRotation: -180, maxRotation: 180 }) } Anyhow, the issue I'm now faced with is that this implementation is extracted from a demo I've prepared for our project, StimulusReflex. As you're well aware, it will work without Inertia, but it simply won't be as sexy. I'm actually perfectly happy to recommend that people purchase a GSAP membership, but I don't want to violate your TOC (or trust) by putting the gsap-bonus.tgz on our public repo. Right now I have it set up with yarn/webpack pulling in the local archive as your npm instructions describe. (You might want to tell people to purge their caches to get rid of old versions, btw!) This works great for my workstation and for deploying to Heroku, but how do you suggest I handle the package management issue? If I was to push the repo as-is to production, anyone checking out the code to experiment with locally is going to get slapped by yarn/npm because that file doesn't exist. I actually do have a suggestion for how you could approach this: add localhost:3000 to your CDN whitelist so that people can experiment with the paid tools on their own machine, but in a way where they can't deploy it. This has actually worked fairly well for FontAwesome, who actually took it a step further to allow paid users to whitelist their project domains through a web interface. The other related question I have is about what I'll call progressive enhancement: is there a way to detect whether you're running the paid version and if Inertia was available from inside your webpack context? Specifically, I want to import Inertia if it's available and skip it if it's not. This would include passing InertiaPlugin to gsap.registerPlugin and even dynamically passing true/false to the inertia var when creating a Draggable instance. If there's a good strategy for this which won't make webpack angry if the file doesn't exist, I'd love to hear about it. Again, I propose a solution: include an InertiaPlugin.js in the OSS version on GitHub that has function signature placeholders - like a Java interface - but only actually spits out console warnings if it's not present. This way developers could comfortably set inertia:true regardless of whether it's available or not.

To get the code to work there is a white SVG named centerwill need to be clicked on. This will be replaced with a play icon, and be swapped out with a pause icon to pause once the dragging works properly. To activate the SVG animation, click the white center SVG. To pause the video, click the native pause button in the html video (sorry still under dev). I have an SVG circle that is a progress bar for the progress of a video's duration named progressCircle. There is another SVG circle that is named vidControllerand it is draggable. vidController is used to update the currentTime of the video. Video of what I'm talking about: https://tog-video-shopify.s3.amazonaws.com/svg-anim.mov I have a Timeline named tl_1 and this is responsible for updating the position of the vidController and the progress of progressCircle. When I pause the video (in the video's native pause button), the progressCircle and vidController stop at the correct position. When I start another drag on the vidController, I expect it to smoothly drag from where it was stopped. However, it is jumping several degrees forward. If I drag it back, it jumps forward erroneously as well. How can I get the animation to not jump and smoothly start where it left off?

Hello, I'm having a hard time doing a .hitTest with a snap, in case I need my droppable to reach the hitTest in the position of the corner element.

Hello, I have a div with a large background image that I'm using draggable and ThrowPos on for users to drag around a map. I now need to have a small scaled down version of the map so people can see where they are currently in the context of the entire map. It's common to see but I can't put a name to it making it difficult to get a start. The map to date is here: https://map.polycode.co.nz/map What I think I need is: A scaled view of the map as the background for the small version. The width and height presumably a percentage of the original map. A div over that representing the current window size and position. With some scaling factor. Some code in the Draggable drag event(?) to move 2 above around inside 1 above I'd appreciate any thoughts on 1-3 and any tips to get me started. The simplified version of the Draggable code is: Map = new Draggable($draggable, { type: "x, y", throwProps: true, trigger: "#viewport", bounds:{ top: 0, left: -(mapWidth-viewportWidth), width: mapWidth, height: viewportHeight } });

Hey guys, I find myself in a pretty interesting UI challenge that I think Draggable might be able to solve. I will try to explain it as clearly as possible. Here's what I want to do – on both mobile and desktop: 1. Have a list of edge-to-edge elements (Think the contacts list on iOS without the separators) that the user can scroll through normally. 2. Allow the user to tap / click and select/deselect the list items 3. Hold the finger or mouse button down for 800ms and initiate drag/drop so that the items can be re-ordered. The main problem is having drag and native scroll at the same time on mobile devices. Quite naturally because Draggable uses the touch events to perform its dragging magic, so when you try to scroll the list, you instead throw the list items around. I plan on tackling this one by setting up my own mousedown / touchstart listener and combine it with a timer that would then create a new Draggable instance if the mouse/finger is still pressed after the 800ms. At that point I could forward the mouse position via an event to the new draggable.startDrag() method and have it drag instantly after being created. From what I can tell, this would be the simplest way to solve my problem, but I just wanted to make sure this logic isn't part of Draggable as is, and that the problem hasn't already been solved for me.

how can i get access to the coords when dragging a div in angular using gsap draggable ?