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, Any idea how to build this fancy thing using GSAP? http://pharrellwilliams.com/ They want this effect to be insert one of the section inside a one page website, the effect is user can scroll in any direction, drag to view more & also filter effect. Now i lacking idea where to start research the effect or any example to give me idea to start with this fancy stuff. or the keyword for research? Please advice anything, because i fully stuck and hopeless now Million Thanks.
  2. Dear GSAP team I just updated an older project to the latest version. TweenMax: VERSION: 1.20.2 Draggable: VERSION: 0.15.1 Since then the right mouse action is gone (tested in Firefox, Safari and Chrome on MacOS). Setting allowEventDefault makes no diffenrence. When I go back to version 1.19.0 the right mouse action is working again. Is this intended? Cheers Henry
  3. Hi all, In the codepen example that is provided, the knob and the scroll-bar are linked, which is what I want to accomplish for my project. The content area is also draggable by mouse, which I want to strip out of the code, but I can't seem to make it work.. In summary: i want the knob to link to the scrollbar of my page.. that's it. (So if the knob is fully rotated, the scrollbar is at the bottom of the page etc.). I would appreciate any help. Thanks in advance!
  4. Hi all, Building off of the question from which related to impacting a timeline that had a separate target than the draggable instance, can you control a timeline that has the same target? For example, an offcanvas menu that may be triggered open via a "hamburger icon" and then can be closed (reversing the timeline) by clicking outside of the menu, but also be able to impact the reverse timeline by swiping it close with Draggable? In this scenario, you'd be using a certain attribute of the tween (x) along with the current position of `x` in Draggable.
  5. Hi there, My company recently has me working with a software called 'Webflow'. I figured out how to integrate greensock on webflow. here is my code <script> //draggable content Draggable.create("#DraggingArrow", {type:"x,y", edgeResistance:0.65, bounds:".slider-bar", throwProps:false}); </script> Now my question is, how do I go about telling greensock, or the browser, that once #DraggingArrow is at say.. 50% of .slider-bar, do this? See attached screenshot for what I am trying to make Thanks in advance!
  6. Hi, I'm using GSAP's Draggable, and I noticed that while the users starts dragging, a hidden ghost div is appended to the div which contains the dragging element. This is what is looks like: <div style="visibility: hidden; height: 1px; top: -1px; pointer-events: none; position: relative; clear: both; width: 585px;"></div> Is this necassary? Can I eliminate this div OR eliminate it's width (because it widens the container div incorrectly) ? Thanks, Elior
  7. Hey all, I think I have a fun one for Blake, since he's done something very similar. We're about to launch the new website for Carmex lip balm, and we got some awesome 3D product renders made. On the single product pages in the hero area is where these 360 rotators will be featured. What I can't get working is the throwProps! I think it has something to do with how I'm updating the texture frame onDrag... I'm simply incrementing a counter and setting the texture frame to that. I tried really hard to break down the Mario example, but was unable to determine exactly what math to use or how to write the changing of the frame into a tween so throwProps will work. These product rotators would be twice as nice with that feature! Do you think I'm close, or that throwProps is possible with my more basic implementation? Thank you eternally in advance.
  8. Hi, I had created a infinite slider using GSAP which you can drag as well. Just today I noticed that even if I keep holding the slide, the onRelease event fires in draggable on touch devices while on desktop it works fine. I guess that's intentional behavior? How can I change it to stop autoplay if user isn't swiping?
  9. Hi everyone, Is there a way to make the Draggable knob link to the (browser) volume? https://greensock.com/throwpropsplugin I'd like to hear if there is. Thanks in advance!
  10. Hi First of all, hats off to your great product! I need some help with Draggable. I am trying to embed 3 charts (using Highcharts) in a div and make that div scrollable using Draggable (and later add momentum using throwprops but haven't come to this stage yet). All works great except that Draggable seems to capture all touch events. You will see in the use case below: Here is the same but with Draggable disabled: You will see that you can scroll regardless of where you place the finger (but of course now the Draggable magic is missing so I wont be able to add momentum or anything like that to the sliders). Please let me know if this is a bug with Draggable or if I am simply not setting the right properties and if there are any easy workarounds. Thank you very much for your time. cheers Nayanuka
  11. I am interested in using GSAP Draggable in an educational project that must meet certain accessibility guidelines. Each activity or game must work even if the user has visual impairments and uses a keyboard but no mouse. Any thoughts would be appreciated.
  12. Hi, I have multiple elements in a container and I am using draggable to be able to drag them, after spending a lot of time I came to realize that in draggable using 'this' doesn't let you access target element using jQuery or TweenMax. So how can I access the element that is being dragged? I have attached a simple codepen where I am trying to set padding on target element, I tried many different properties but no changes. Thanks
  13. Hi all, Trying to make a circular nav with flick, spin and rotating properties. Got it to rotate, but it doesn't seem to flick spin with accelerating and de-accelerating momentum I've added the draggable plugin and set throwProps to true. What am I missing / doing wrong? Any help appreciated.
  14. Hi guys! I'm having a bit of trouble here with Draggable util. I am trying to make a tabbed interface on mobile, made of a horizontal container which can be scrolled in the X axis with sections, and sections which can have any number of posts, and can scroll in the Y axis. With draggable, this works great in desktop when using a mouse, but when on mobile (Android, iOS, or Chrome Inspector as mobile), the X axis won't budge. You can watch it in action in the codepen. Any insight on it would be greatly appreciated
  15. Hello, currently I am trying to update a project from gsap 1.18.2 to 1.20.2. The project uses Draggable with type: 'scrollTop' for some scrollable views. With the new version of Draggable the `_placeholderDiv` div element gets added to those views on drag. This results in some undesired behaviour - width of lists are now wrong, because the parentNodes width is added to the placeholder div. Looking through the gsap versions, a change was introduced in version 1.19.0 Before: if (self.autoScroll && !rotationMode && !scrollProxy && target.parentNode && !target.getBBox && target.parentNode._gsMaxScrollX && !_placeholderDiv.parentNode) {//add a placeholder div to prevent the parent container from collapsing when the user drags the element left. _placeholderDiv.style.width = (target.parentNode.scrollWidth) + "px"; target.parentNode.appendChild(_placeholderDiv); } After: if (target.parentNode && (scrollProxy || (self.autoScroll && !rotationMode && target.parentNode._gsMaxScrollX && !_placeholderDiv.parentNode)) && !target.getBBox) { //add a placeholder div to prevent the parent container from collapsing when the user drags the element left. _placeholderDiv.style.width = (target.parentNode.scrollWidth) + "px"; target.parentNode.appendChild(_placeholderDiv); } In 1.18.2 the conditional tested for !scrollProxy. Current versions test for scrollProxy. Is this change on purpose? And if, how do I disable the insertion of the placeholder div (besides disabling it in the Draggable source code)? Cheers! Christian
  16. When using Draggable, the same item that has a passing hitTest with onDragEnd won't work with onThrowUpdate or onThrowComplete. Is this intended?
  17. Draggable works perfectly in all browsers - except Firefox (Windows - haven't tested on Mac yet). It gives me this error: TypeError: Argument 1 of SVGPoint.matrixTransform is not an object. And then the Draggable is not working at all Check it here: http://gsap.mouret.dk/ Any suggestions?
  18. 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
  19. Mighty Powers That Be! Forgive this lowly being for begging but this one has no strength on its own. This one knows that there is no double click/tap in Draggable events but one must pray to be illuminated with the way on how to accomplish such task inside the onClick event. Should one set a variable to check if a second click happens within a second from the first one? If so, should one use setInterval? If not, how should one proceed? *Bow*, *bow*, *bow*!
  20. Hello, I've accidentally* found out that ThrowPropsPlugin plugin has such properties (or events) as onThrowUpdate and onThrowComplete. But they're not documented anywhere. Is there something like a full API reference for all methods and properties for all the modules? Especially required for the ThrowPropsPlugin. Thanks! * I was looking through code examples of some people on Codepen and noticed them using these properties.
  21. I was wondering if there is any way to use draggable so that elements are not allowed to overlap with each other. So that snapping will respect the boundaries of other elements.
  22. 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.
  23. 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!
  24. stereoS

    Draggable Chrome

    Hi, First of all, thank you so much for your amazing support, it helped me a lot of times. I have a problem with Draggable / ThrowPropsPlugin, only on Chrome, and I can’t figure why. Sometimes, the slider don’t move when I drag it although the onDragStart event is called. I made a Codepen here : http://codepen.io/adrienlementheour/pen/KaKggM. Can someone take a look ? Thank you