Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

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 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
  2. 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!
  3. 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
  4. 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..
  5. OUTDATED! These webpack issues are getting out of hand, so I made a little demo to help you get started. But first, have you considered not importing GSAP? I would suggest using a CDN instead as your app will load much faster since it's not included in the bundle and can be pulled directly from the user's browser cache. GSAP is available on both cdnjs and jsDelivr. JsDelivr is kind of unique in that you can bundle all your files up in a single HTTP request! And dependencies that are not resolved by webpack can still become dependencies of the output by using the externals option. For example, if you are using React you could do this using the unpkg CDN. <script src="https://unpkg.com/react@15.3.1/dist/react.js"></script> <script src="https://unpkg.com/react-dom@15.3.1/dist/react-dom.js"></script> And then in your webpack.config, you would configure those libraries like this... module.exports = { externals: { "react": "React", "react-dom": "ReactDOM" }, ... }; If that's not an option for you, here's the repo I made. To run it, install webpack and the dev-server first npm install webpack webpack-dev-server -g, and then npm install to install the demo. Use npm start to start the dev-server on port 8080. If you're wondering where my gsap import is, there isn't one. I made TweenMax global using the ProvidePlugin. https://github.com/OSUblake/gsap-webpack
  6. 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
  7. 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; } });
  8. 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?
  9. 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!
  10. Hi guys, I set up a very minimal test case here: https://codepen.io/mbuesing/pen/pRpPOX Setting up a draggable with type x or y on an SVG element causes a problem on Chrome on Android: I can't move the element more than a couple px at a time, and the drag is not smooth. I can see this behaviour on multiple Android devices. I first thought this might have to do with the fact that in Chrome, GSAP uses CSS transforms in SVGs instead of attributes, but since that changed in the last version and the problem still persists, I guess it's something else. In this case I could simply use a proxy object and set the cx/cy values of the circle, but the project I'm working on is much more complex, so I'd like to avoid that if possible. Do you have any ideas on how to fix this? Thanks!
  11. 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?
  12. 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!
  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 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
  15. 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!
  16. 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 ^^^
  17. 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
  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. 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.
  20. 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!
  21. 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
  22. 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
  23. 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.
  24. I have a simple Draggable list ``` var selector = '.sortableList'; var sortable = document.querySelector(selector); self.m_draggables = Draggable.create(sortable.children, { ``` full question also posted at: http://stackoverflow.com/questions/42444569/how-to-add-remove-children-in-a-gsap-draggable-list How do I add and remove children from the list, or better yet, how do I just append a brand new list to an existing instance of a Draggable? or, is it better to destroy rge Draggable and create a fresh one with the new set of children? and if so how? Thanks for reading, Sean.
  25. Hi Guys, I'm trying to achieve something but I'm a bit stuck. So I'm trying to integrate the Jquery UI selectable with the Draggable. Basically I want to be able to tell an element is clickable (I know I can set the draggable=true attribute) and draggable at the same time. Is this possible? Do I need to create additional layers on the element? The goal is to visually only appear to be 1 element (for instance an image, a thumbnail, etc.) I hope it wasn't too confusing Thanks, Hugo Noro