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 a way to use the gsap Draggable in Nuxt.js? I get the error "navigator is not defined" in file "node_modules\gsap\Draggable.js" line 391 _isIE10orBelow = (((/MSIE ([0-9]{1,}[\.0-9]{0,})/).exec(navigator.userAgent) || (/Trident\/.*rv:([0-9]{1,}[\.0-9]{0,})/).exec(navigator.userAgent)) && parseFloat( RegExp.$1 ) < 11), //Ideally we'd avoid user agent sniffing, but there doesn't seem to be a way to feature-detect and sense a border-related bug that only affects IE10 and IE9. I am referencing gsap and Draggable inside my .vue file by: import TweenMax from 'gsap' import Draggable from 'gsap/Draggable' I am guessing this is due to Nuxt doing a server side render and not having a window/navigator object?
  2. I have a dial that works as expected when dragged but should also rotate to the selected year when clicked. This is when it behaves erratically. I have posted this CodePen to better illustrate the problem. I consoled log the index of the clicked element to make sure it was the right element that has been clicked. It is also colored black on hover. Once the dial is loaded the first click will return the right data and rotate the dial to the expected position. The next click won't it won't even output the expected message (clicked index) on the console. It looks like the problem is on the rotation TweenLite line TweenMax.to($("#dial_square"), 0.7, { rotation:theta }); on the giraDial() function. If I comment out this line on the giraDial() function then the click triggers the function and the console outputs the expected values but obviously, without dial rotation. function giraDial(laPos){ var theta = -1-laPos*36; $('.anual').removeClass('activo'); var girar; $('.diametral').each(function( indx, elmt ){ girar = indx*-36 - theta; //TweenLite.to($(this).find('.anual'), 0.8, { rotation:girar }); }); //TweenLite.to($("#dial_square"), 0.8, { rotation:theta }); TweenLite.to($(".anual"), 1.8, { opacity:0.8 }); $anuales[laPos].addClass('activo'); return theta; } I've been struggling with this for a couple of days now and can't find a solution or a similar problem. The final work can be seen here too: http://report2016.barentsre.com/ (navigate to the timeline section).
  3. Hi all.. I have a problem with draggable...I made a knob button...when I drag it (turning it around itself) it works good...But on mobile when I tap it, its rotating and firing drag event...cannot run my click action...is there any way to solve this problem? Draggable.create(".btnCnt", { type: "rotation", throwProps: false, onDrag: function () { $('.radMenuBtn .btnCnt').addClass("noclick") }, onDragEnd: function () { $('.radMenuBtn .btnCnt').removeClass("noclick") } }); thanks...
  4. Hi I am trying to get the x and y end point after a drag event. But the values are negative and dragging to the top left does not return 0,0 as one would expect. The values I am getting seem to be relative to the starting position of the dragged element, rather than absolute from the bounds container. You can see in the example if you move the box to the left and up the endX and endY are negative values, but I want the x and y values the box's position within the container. Am I doing something wrong or do I need to read in the starting position and then offset it? Thanks
  5. 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.
  6. 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
  7. 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
  8. 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.
  9. 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!
  10. 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!
  11. 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?
  12. 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!
  13. 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
  14. 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.
  15. 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.
  16. 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
  17. 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.
  18. 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
  19. When using Draggable, the same item that has a passing hitTest with onDragEnd won't work with onThrowUpdate or onThrowComplete. Is this intended?
  20. 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
  21. 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?
  22. 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.
  23. 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.
  24. 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*!