Jump to content

Search the Community

Showing results for tags 'draggable'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







  1. Hi, Is there any way to change the 40px of margin for the autoScroll feature in Draggable to a higher value? My page has a toolbar that overlays the page, and the main content of the page has a permanent top side padding of the side of the toolbar. The problem is that due to this I need to drag the element under the toolbar in order to reach the edge and the autoScroll feature to kick in. Changing the 40px value to a higher number would fix this issue. Is it even possible to do so? Greetings and thanks. More info: https://greensock.com/docs/Utilities/Draggable/autoScroll
  2. Hello, In preparation for a larger project, I've been playing around with Draggable and created a very simple scrabble board. There are two 'tile racks' that have tiles which can be dragged on the board. I've relied on a lot of concepts from https://codepen.io/osublake/pen/dPEbey. But there are a few fundamental differences.. the biggest being that I want to create multiple clones of the same letter. I have a lot working, but I'm also having issues with auto scroll and bounds. In the provided codepen: the draggable item doesn't follow the mouse while auto scrolling. It appears to stay fixed while the scrolling occurs. the draggable item can be dragged beyond the bounds of the div. The div continuously expands I have tried various ways to find a solution to these issues, without success. Any help is appreciated
  3. If someone else could check this for me, we could try and figure out if this is a bug or not. I've tried Safari, Firefox, Chrome, Opera in a Mac. I can see this behaviour in Chrome and Opera (blink-based issue maybe?). The catch here is that I am using a dummy DOM element to calculate a velocity to move the THREEJS camera with. Currently the dragging is locked in the x-axis. I don't know if this will go away when I start using both axis. To reproduce, open the codePen, move the dummy draggable (dark tinted element, it covers the whole canvas). If you move the dummy vertically before moving horizontally, nothing will move. If you move it horizontally first, it will move as expected.
  4. Hi All, I am writing this thread because I want to show my appreciation to folks in this forum, they helped to resolve my problem in a very short time. Few days ago I jumped into a thread, I didn't read the rules, my bad. The original thread I jumped into: Then @Dipscom and @GreenSock (Sorry I don't know why I couldn't mention you here) helped quickly. My problem was resolved by @Greensock helped to update the beta version of Draggable. Now my elements can be dragged in Chrome of Android devices. Thank you very much both of you. I wish you have Good Health and Good Luck. Cheers, Alex
  5. Hello everyone, I am new to GSAP and I am trying to enable dragging and click on custom html5 video timeline with GSAP. I have read a couple of posts (like this one) on the forum but there is something I can't understand... I've reproduced a simplified example on the following jsfiddle (I hope you don't mind jsfiddle) : https://jsfiddle.net/epigeyre/oLmk6b0d/ So I create my draggable element from an element stored in a variable, bound it to it's container (which is the timeline container), and then add my function onDrag (I guess click will be the same). The timeline progress is shown by a div inside the timeline container that is scaling on an X axis from 0 to 1. I think linking to the current video time is ok but the animation is not (I don't understand why a translate is applied...). Here is that specific snippet: Draggable.create( timelineProgress, { type:'x', bounds: timeline, // My timeline container onDrag: function() { video.currentTime = this.x / this.maxX * video.duration; TweenLite.set( timelineProgress, { scaleX: this.x / this.maxX } ) ; }, onClick: function() { console.log('click'); } }); Could you help me understand what's going? Thanks a lot for your help!
  6. I'm building a Pomodoro Timer and want to create a draggable div (assigned with a background-image of a 25 minute timescale) to set a timer and on release the div/image will animate back to the starting position. Can I do this with GSAP? Here's my Codepen: https://codepen.io/iamryandnelson/pen/dRbKMM
  7. I am using draggable script with throwprops...I have a menu button at the bottom of the page inside fixed div...and my button position absolute...I want to throw my button to center of viewport. How can I do that? thanks..
  8. Hi, I've tried using Modifiers Plugin with Draggable as follows: Draggable.create(".box", { type:"x", modifiers: { x: function(x) { return x % 500; } } }); It did not work. Is there any other way to override the x value before it is applied to the draggable element while dragging? Alternatively I was trying to find a way to initiate dragging on an element without applying the transforms to it. Thanks, Max
  9. Hi GSAP, What is the syntax to have touchAction work on both axis? Single axis works: TweenMax.set(element, { touchAction: "pan-x" }); This doesn't work: TweenMax.set(element, { touchAction: "pan-x pan-y" }); Thanks!
  10. I made spinning knob button with draggable. I used snap option. I want to get instantly my button's angle value. How can I get that? var rotationSnap = 60; Draggable.create("#knob", { type:"rotation", throwProps:true, snap:function(endValue) { return Math.round(endValue / rotationSnap) * rotationSnap; } });
  11. I'm using Draggable to create scrollable element with several divs inside it. For example <div id="draggable"> <div>example</div> <div>example</div> <div>example</div> </div> I want to apply some mousedown jquery code to the divs. for example: $("#draggable div").on("mousedown", function() { //do something... }); The Draggable seems to overwrite and/or steal jQuery's mousedown event. If I disable the Draggable then there is no issue. If I apply some click jquery there is no issue either. for example: $("#draggable div").on("click", function() { //do something... }); I do need to use the mousedown event in this scenario. Has anyone encountered something similar, or does anyone have a solution?
  12. Hello fellow greensockers, I hope every one is well! Draggable issue, I have a div on which I set a 3sec timer on "mousedown" or "touchstart" to enable draggable functionality. On "mouseup" or "touchend" I clear the timer which doesn't let it enable the draggable when the mouse is realeased before 3 secs. If draggable is activated I drop my listeners and work with draggable's listeners. The same logic applies to disable back the draggable in it's onPress and on Release events but this time for 4 secs. Everything works on desktop chrome. On mobile though If i just tap and hold my draggable the onRelease event gets fired without even untapping resulting in the draggable not being able to deactivate. If i tap and drag (so that is calculated as drag event) then onRelease fires correctly at the time the element is actually released, unless if the draggable stays tapped which will disabled it (as expected). The think is draggable doesn't disable from a single long tap without dragging on mobile, because without dragging the onRelease fires at a wrong time. I tried setting minimumMovement to 0 just to check if in that case all clicks are interpreted as drag - to force a drag before release (since it works after a drag) but still no luck. I also tried using onClick, but onRelease fires earlier on a single tap and when the element stays tapped for a long time no onClick is fired. This behaviour can be tested on chrome dev tools mobile simulator too. As usual codepen demo linked! http://codepen.io/RedGlove/pen/pPVZgd Any help will be appreciated! Thanks!
  13. Hi everybody, I met an issue that is when I set the Top/Left position manually in onPress function that position values are rounded down even I tried using autoRound: false. I created an example via codepen. Is there any way to prevent that issue, please share me. Thanks in advance!
  14. Hi all! I'm having a bit of a weird situation. I'm creating a fake scrollbar with Draggable that moves its target's scrollTop position as the scrollbar moves. I've got this working like a charm, except for one hiccup... IE is returning different values for the scrollbar's transform CSS value than Chrome/Firefox are. For example, Chrome/Firefox are returning something like matrix(1, 0, 0, 1, 0, 5), while IE is returning matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 5, 0, 1). In order to get my scrollbar contraption to work, I need to listen for/get the Y value of the scrollbar's transform property and respectively set the target div's scrollTop position through a formula using that same Y value. This is proving to be a bit tricky as I need to parse and return different positions for IE (position 13) and Chrome/Firefox (position 5). I suppose my question is this: could someone shed some light onto why IE is returning a matrix3d value while Chrome/Firefox are returning just a regular matrix value for the draggable? Right now I'm using some browser sniffing to get it all to work, but I'd really rather not if I don't have to. Please let me know if setting up a Codepen would help better illustrate this situation. Thanks!
  15. I'm using a container div that I re-use when populating with different items. That div is also a draggable. Interestingly doing this: $(container).empty(); //add new content to container //recreate draggable var draggable = Draggable.get(container); if (draggable != null) { draggable.kill(); } //create new draggable here will result in the draggable to malfunction in that it suddenly contains both the old and new content which I really don't understand since the container.empty() call should clear all old content of it. Doing this: var draggable = Draggable.get(container); if (draggable != null) { draggable.kill(); } $(container).empty(); //add new content //recreate draggable works just fine but it's awkward that I can't rely on $(container).empty to actually clear the div properly. How is it possible that .empty() doesn't remove content properly inside a draggable?
  16. Hi gsap gurus. Just wondering what the smartest way of setting some kind of timer / timeout in a hitTest that is occurring in the onDrag function, so that I can run a function/animation only if the hitTest has been true for more than 0.8 seconds? Thanks in advance
  17. Hi everybody! Just wondering, I am doing a web app it allows user can move the position of an element in Top/Left, they can change the type of position in Pixel or Percentage manually. But as I known Draggable only works on Pixel. To do it I tried converting Percentage to Pixel and using Update method when user hover the element. But it is a cheat and sometimes the position of the element is vibrated. Any advice? Wish all you the best!
  18. What I'm going for: When an element reaches the edge of it's boundary box, it re-positions itself at the other edge of it's boundary box. If thrown, it will maintain velocity. I'm using .set and it's removing velocity. I saw on another thread that there's a way to access velocity but I'm not sure how to keep it when re-positioning the element, or even if I'm thinking about it in the most performant way. https://greensock.com/forums/topic/8198-end-position-with-draggable-and-throwprops/ Thanks!
  19. Is there a smart way of performing a hitTest when then drag part of a throw finishes (onDragEnd), but hit testing what will be the final position of the element once the throwprops tween has finished? I know I can access the end x and end y in onDragEnd but don't know how I would go about using the this.hittest with that Thanks in advance
  20. I adapt following Example from Chris Gannon grKnob3.html In DEMO-Mode it runs perfect. But I have Problem with the integration in my App for Home-Automation, IN your demos you start always from the body-tag. I use in my tests different tags. In the example (3rd attachment ) I used the "container" tag. I have it on my screen on the top position. The wheel run perfect. But not on the right position in the popup window (down-right). I want the Picture with a predefined size (240x240). Additional Questions: How I get a value from the wheel? Or how I put a Value to the wheel? Your predefined value "initialFace" don't work........ Hans ^^^
  21. I'm trying to make a looping Draggable that snaps and only moves one step at a time. The problem is that with throwProps switched on, the user can throw it more than one 'step' at a time, and with throwProps switched off it doesn't snap at all. I used this pen as a starting point: http://codepen.io/osublake/pen/ee107aeb54bdf4dca1084715d86b5e9c Here's where I've gotten to: http://codepen.io/lewisSME/pen/mWQoye Any help greatly appreciated.
  22. when there is a input or textarea inside draggable element with type:"x", dragClickables:true, shortcuts like ctrl+a not working. tested on chrome 56.0.2924.87 googling about it I saw this issue https://github.com/react-dnd/react-dnd/issues/178 it seems like the bug is because of listening to selectstart
  23. I'm assuming the answer is no, but wanted to confirm: Is it possible to apply Draggable to the window object? I've tried the code below with no luck: Draggable.create(window, {type:"scrollLeft", edgeResistance:0.2, throwProps:false}); I'm assuming this doesn't work because "window" isn't an actual element. I've also tried using "html" as the element, but get the error: Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'. The effect I'm going for is trying to create is using click+drag to scroll the window horizontally. I believe I can do this with standard JS but I love the effect that ThrowPropsPlugin adds. Thanks!
  24. Hi there, (newly registered, but long time user) I have a problem with SVG transitions. If I have a SVG object with a CSS transform and try to tween it, the tween will set an (ignored) DOM transform attribute and nothing happens. Using force3D has no effect, as it still only sets the DOM attribute and not the CSS property. Something is clearly wrong here. When is this an issue? When using Draggable, as Draggable sets the CSS property. Once a Draggable has been updating the value, I can no longer tween it - even if I kill the Draggable. Regards, Morten
  25. I'm using Draggable to create a scrolling gallery. As part of this, I need to know the progress that a user has made while dragging through the gallery. Is there any kind of 'onProgress' callback, or any way this can be achieved? I know there is onDrag, but I am also using throwProps and I need to know the status of the progress whilst it is being 'thrown' as well as dragged. Ideally, there would be something like this: Draggable.create(timeline, { bounds: '.page-timeline', type: 'x', throwProps: true, onProgress: function(e) { console.log(e); } }); This is in order to create another animation. So if I can get a value between 0-1 of the progress, I can set the position of another animation. Even if I could just get the 'onProgress' functionality, I should be able to calculate the 0-1 myself from various offsets if I had the 'x' amount.