Search the Community

Hi everyone, I use TweenMax and Draggable (GSAP 1.15.0) with RequireJS for a project. My require config is : require.config({ paths: { TweenMax: '../../local/js-vendor/gsap/src/uncompressed/TweenMax', Draggable: '../../local/js-vendor/gsap/src/uncompressed/utils/Draggable', }, shim: { Draggable: { deps: ['TweenMax'] } } }); It works like expected. But i have problem during the minification step with the r.js tool. The compiler looks for the TweenLite file, but doesn't find it. I have found in this thread http://greensock.com/forums/topic/7213-using-timelinelite-and-tweenlite-with-requirejs/ that I can set the paths like this : require.config({ paths: { TweenMax: '../../local/js-vendor/gsap/src/uncompressed/TweenMax', Draggable: '../../local/js-vendor/gsap/src/uncompressed/utils/Draggable', TweenLite: 'TweenMax' } }); But now the error is that the TweenMax file is not found. If I do directly require.config({ paths: { TweenMax: '../../local/js-vendor/gsap/src/uncompressed/TweenMax', Draggable: '../../local/js-vendor/gsap/src/uncompressed/utils/Draggable', TweenLite: '../../local/js-vendor/gsap/src/uncompressed/TweenLite' } }); it works as expected. But TweenLite is packaged two times (inside TweenMax + TweenLite directly) A workaround is exclude TweenLite with the compiler options. requirejs: { compile: { options: { paths:{ 'TweenLite':'empty:' } } } } I don’t know if there is a better way to fix the problem, but for the moment it works for me. Hope it helps. And I’m all ears if someone has a best solution.

Hi, I'd like to replace jQuery's draggable by GreenSock Draggable (possibly with throwprops), but it seems it doesn't have a on-drag-event. Is that right? BTW, I would like it very much if the documentation of the utilities mentions dependencies.

Hi everyone. Just wondering, if It is possible something like: Draggable.create("#myObject", {type:"xPercent,yPercent"}); or Draggable.create("#myObject", {type:"leftPercent, topPercent"}); Simply said, my goal in both cases is a percentage output. Is this possible with current version of GreenSock Draggable?

Hello, Is there any existing method in create() of setting up events triggered when Draggable objects have mouse over / out? Thanks!

Hello, I was wondering how could I limit a draggable movement only diagonally towards top-left and bottom-right. Thanks guys!

Hello, I'm developing a web app that uses polymer to display some custom components and GSAP to drag them around. It appears that there is a conflict between draggable.js and webcomponents.js. Webcomponents.js is used as a polyfill for Firefox/Safari/IE (none Chrome basically) to provide support for the shadowdom and other such things. In Firefox, when I enable polymer on my site, all of my draggable divs become...undraggable. No error is thrown. The draggable events (click, move, etc...) are being thrown but the divs just won't move. However, as soon as I disable polymer (i.e. removing the javascript includes, webcomponents.js specifically), all the divs become draggable again. I looked into the issue and it looks like webcomponents.js wraps all DOM elements within it's own object and this...can have side effects. Here's a link to what I'm talking about: http://webcomponents.org/polyfills/shadow-dom/#known-limitations Looking through draggable.js I figured out that the problem is that some of the matrix calculations are returning NaN as a value and this breaks the transform movement. The specific lines that are causing the calculation error are near the bottom of the _getOffset2DMatrix function. It's these two lines: m[4] = Number(m[4]) + offsetOrigin.x + (offsets.offsetLeft || 0) - parentOffsetOrigin.x - (isRoot ? 0 : parent.scrollLeft) + (offsetParent ? parseInt(_getStyle(offsetParent, "borderLeftWidth"), 10) || 0 : 0); m[5] = Number(m[5]) + offsetOrigin.y + (offsets.offsetTop || 0) - parentOffsetOrigin.y - (isRoot ? 0 : parent.scrollTop) + (offsetParent ? parseInt(_getStyle(offsetParent, "borderTopWidth"), 10) || 0 : 0); And the specific part of both calculations that returns the NaN value is: (isRoot ? 0 : parent.scrollLeft) (isRoot ? 0 : parent.scrollTop) When isRoot is false, for some instances of the calculation (this routine gets called a lot) the "parent.scrollLeft" and "parent.scrollTop" properties are "undefined". Yet, this ONLY happens when webcomponents.js is loaded (which again is needed for Firefox and Safari for Polymer to work). When webcomponents.js is NOT loaded, "parent.scrollLeft" and "parent.scrollTop" return numeric values as intended. The work around a co-worker of mine was able to figure out is to simply "unwrap" the DOM element being passed into the matrix calculations (basically undoing webcomponents.js wrap business). This fixes everything BUT of course means a direct update to draggable.js which isn't ideal for the long term. Here's what we did to fix it for now: _getConcatenatedMatrix = function(e, invert) { e = (typeof unwrap === "function") ? unwrap(e) : e; if (!e || e === window || !e.parentNode) { return [1,0,0,1,0,0]; } .... / We simply added this line at the top of the _getConcatenatedMatrix function. e = (typeof unwrap === "function") ? unwrap(e) : e; The function "unwrap" is defined in webcomponents.js and when executed reverts e to what it is expected to be. Another solution we used that also worked was to update the "isRoot" inline if statement from above to the following: (isRoot ? 0 : (parent.scrollLeft || 0)) (isRoot ? 0 : (parent.scrollTop || 0)) And while this seemed to work and draggability was returned to the divs, we weren't sure if this would actually produce other unknown side effects. Using "unwrap" basically passes through exactly what the code was expecting to receive in the first place if webcomponents.js wasn't loaded, so it seems the most non-bug-producing solution BUT it forces a coupling to webcomponents.js specifically. The other solution, seems to work, but could have unforeseen issues later. And both solutions require updating draggable.js which will make keeping our library up-to-date a hassle. So, my questions to you guys is, have any of you experienced this issue? Did you find a better non-draggable.js modifying solution? Is there any chance draggable.js could be updated to support webcomponent polyfills? Thanks for any feedback, Mariano Martinez III

Is it possible to have a draggable snap to exact co-ordinates rather than an array of x and y values? For example make it snap to {x:40,y:50} and {x:100,y:200} only? At the minute if I use snap:{x:[40,100], y:[50,200]} it will snap to all 4 combinations of these values.

Love the product, first time posting. I couldn't find in the docs if there was a method to detect if the draggable object moved left or right (or up or down). I was calculating using onDragEnd document.getElementById('draggableobject').offsetLeft - this.pointerX In some cases I had moved the element to the right just a teeny bit but received a negative number from the calculation above. Any advice would be appreciated.

We're encountering an issue using Draggable on a multitouch table (WIndows 8 + Chrome), but it also seems to happen on Android Lollipop, so it's probably a general issue. When dragging an item and you use another finger to tap shortly on the same item, it will be suspended in place, not firing the proper events for ending a drag (onDragEnd, onRelease). Snapping and throwprops will also not work. The issue is easy to reproduce using the sample on https://greensock.com/draggable. Enable the checkbox for "snap end position to grid". Start dragging one of the squares and then shortly tap on it with another finger. When you release, the square will not snap to a position on the grid. Has anyone encountered this and found a way to fix it? Should I file an issue somewhere?

Hi, I have one small questions. I would like to have an outside container handlers when the application loads. Only when I catch handler so it'll only be able to drag into a given container. Is it possible to set the parameter? Thanks for tips...

Hello and thanks for any help you can provide guys. Here´s my little issue: I have a map I need to zoom in/out this map. When zoomed in, users may drag it to see the details. Everything works, until I try to reset the map to it´s original scale/position. If I dragged the map, when the zoom out is selected, the scale goes right, but the position goes wrong. I want the position to be reset to the original values but it goes crazy if I made a drag of it. Also, as a plus....it is possible to make this zoom in, according to the user mouse click? Sorry for my grammar! Regards!

I'm using multiple instances of Draggable in the type:rotation and I've hit a snag. I'm building a html based single page app for iPad, this slides horizontally through sections of content using 3d transform. You swipe vertically within a section to see slides, and swipe left or right to move through sections. It moves 1024px every section swipe. Draggable rotation works perfectly if it appears on any slide in the first section, but the interaction is offset somehow on slides in subsequent sections. it's as if the datum point is relative to the window, or the Draggable instance is locked in the vertical plane of dragging. Here is the container markup of which all the code sits - I'm afraid the code is too complex to add to a codepen. <section id="Container" class="collection" style="width: 3072px; transform: translate3d(-1024px, 0px, 0px);"> I've tried looking into the applyBounds function and defining bounds, I even took the example back to the basic one on codepen. Ive used setTimeout to see if I was calling Draggable too early. I'm stumped.

Check out the Codepen and you'll notice that you're able to drag the octopus to the left a bit before the bounds stop you from going further. You can't go to the right at all. After you let go, you'd expect to be able to drag it to the right (back to where it started), but it seems as though the bounds reset based on the image's relative position. When you drag it, you can't go to the right, but you can go further to the left than you originally could. Thanks for your help!

I'm not sure if it's a bug but the latest Chrome under iOS 8 (old iPad2) behaves different than Safari while swiping/dragging content. Can be something in GSAP as well but guess it's Chrome for now. If you drag/throw a page while your finger leaves the screen the throwprops plugin detects you left and just does what it's supposed to do. Well, that's for iOS Safari, Chrome does the same except if you leave the screen while you swipe to the top and leave screen while swiping over the it's browser bar. If you do so the draggable/throwprops will just stop moving until you drag within the screen again. It's annoying since with my navigation you have to swipe/drag/throw from bottom to top to scroll the site. Works perfectly if you keep you fingers on screen. I made a little page which shows the problem: http://ozboz.nl/dragger/ It's like the browser bar gets the focus or something. Hope someone can give me a fix (or Google for that matter).

Suppose that I have the following code: window.mygs = window.GreenSockGlobals = {}; Modernizr.load( [ { load: [ 'TweenLite.js', 'ThrowPropsPlugin.js', 'CSSPlugin.js', 'Draggable.js', ], complete: function () { window.GreenSockGlobals = window._gsQueue = window._gsDefine = null; // from TweenLite.js line 67 window.mygs.Draggable(...); } } ] ); When I run it, I get this error: Uncaught TypeError: Cannot read property 'greensock' of undefined Draggable.js:795 What am I doing wrong? Is it possible to load a sandboxed version of GSAP asynchronously? I only need it after the page has loaded, so I'd prefer to load it asynchronously. Thank you.

hi, I am battling to switch between 2 draggables setup on same element, am wondering if this is possible at all. basically the codepen has an example of what I want to do, but it isnt seamless. draggable is setup for element of type x,y, what i want to do is when the drag direction is up kill the type x,y draggable and switch to a type: rotation draggable so that the card moves around on an axis. you can see mine does that, but only if you release and then click again - is there any way to make this seamless, so it just switches mid-drag ? I am not so sure its possible, but am hoping someone on this forum has a better idea than me and can confirm or deny. thanks, Justin

I'm working on a site which will use like 7 slides in a kind of stair way. I was now trying to use Draggable for my navigation but I want to prevent the user to get lost. Since you can use type:x or type:y I thought I might get somewhere if I could change that type on the fly after Draggable.create. That doesn't seem to work. Maybe someone knows if that's possible or if I better can look for a solution based on a combination of tweens and scrollTo? To be clear an image attached of the layout. Every screen will cover the entire window.

I couldn't find a way to enable draggable scrolling if the initial target is a link. The same issue can be seen here - https://greensock.com/draggable- you can't scroll the element if you drag it by the "Club GreenSock" link. What can I do to enable dragging for this use case? Thanks, Nikolay

When I create a Draggable object of type "rotation", it starts at 0 degrees rotation. Is there a way to set this to another value via JavaScript code? Use case: I've got a dial that selects a particular setting that gets saved. When the user comes back to the screen I want the dial to be positioned to the previous setting. Thanks! David

Hi, simple question: How can i tell a Draggable that all values during dragging and during throwing are rounded values. During dragging it seams that it uses rounded values already, but when it came to the second part, where a tween for throwing takes control, the values are not rounded anymore. This leads to blurry text or little gaps i.e. between images (translate3D(23.3234233, ...). I know i can request the tween (via draggable.tween), which is created after onDragEnd, but i have no chance to set roundProps to a tween instance which is already created? In my view, the easiest solution would be to have a roundProps-properties to set via the vars-object when creating a Draggable. Draggable.create("#yourID", {type:"x", throwProps:true, roundProps:["x"]}); Thanks.

Hi, is there a way to clear the existing draggable tween onStartDrag or onPress? I get a small hickup when the draggable reaches the last snap-position and a user tries to drag past this position while there's already a draggable tween running. What happens is, it tweens to the previous snap-position. Setting the edgeResistance to 0 did not help, either. So I'm trying to find out if there is a tween running and to clear that before the new Drag is initiated. Thank you. Peter

Hello, I'm a Draggable/GSAP newb... I've been playing around with it to see if it meets a requirement that I have for a project i'm working on. And basically what I'm trying to do is to start off with the draggable instances on the white div, but make the orange div the container, so that when a user drags the green or red squares they drag them from the white div to the orange div. Right now, if I set the draggables bounds to the orange div they start off on the orange div. Can anyone help me? Thanks.

Is it possible to have natively vertical scroll elements within a horizontal Draggable element?

Hello GreenSockers, I just set up a row of Draggable cards that all move together using Draggable and some advice from this forum. The dragging works great but doesn't play nice with other code that is using buttons to move the cards. Would someone please recommend a way to drive the draggables with buttons? Thanks, ww

Hi All! I am in the process of building a simple slider with the GSAP's Draggable inside a responsive(ish) site — only one breakpoint. Basically what the slider does is — as it is being dragged it updates its' position to the span above. Essentially letting the user know how much percentage they are on the bar. Note: The draggable's initial starting position is provided by an outside AngularJS service, but in the CodePen test is set to fixed 50%. After initializing Draggable(s), we convert that % value into pixel values, and use TweenMax.set() to set the new value. This was done, because because for some reason the Draggable initializes back to left: 0px and drags form there if the % value is left. Kind of jarring. When the user stops dragging, then the value is calculated back to the % value, so that when the site is resized then I can keep the draggable relative to it's parent bounds. Before the drag is started again... onPress: I reconvert the percentage value back to pixel, and then we can start the drag... Issue (#4): Number 4 in the list above is where I currently have an issue. The draggable is restarting its' drag position from 0px again even though the left value has already been recalculated back to pixel based value...I basically have to "click" the draggable with full release THEN I can drag without it restarting from left: 0px, and if I just press and then drag it starts from 0px... Any ideas as to what is causing this issue? Or maybe I'm missing something. I've thrown an almost exact copy of my code inside the CodePen below.