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. I was just wondering, as I'm completely new to GSAP ad Draggable. Is it possible to have a number of boxes in a vertical column and then have these so they either land in area 1 or area 2. This is for a sports management site and effectively the column is all registered players, area 1 are those in the starting line up and area 2 are the substitutions. My plan is to then loop through what is in area 1 to use a PHP cURL script to send SMS and Emails notifications to these players so I'd use a form that captures the data in area 1 and sends as a POST value to my . php file and then again for area 2 but with a different destination. I hope that makes sense and sorry if it's a bit vague but am a bit cautious of spending hours working through it if it turns out it's not possible!
  2. Wouter11

    Dynamic Bounds

    Hi! Recently I ran into Ueno's website and their about section is using GreenSock to display a gallery of photo's. But the thing is they have their bounds setup in a pretty unique way. The whole draggable section is overflowing but comes to a stop at a certain point. You can experience this by dragging the photo's underneath the "At your service" section. I would like to achieve a similar effect so that it is overflowing but still uses bounds when I scrolled to far. The problem is, I'm not sure where to begin. Anyone that can point me in the right direction or shoot me an example of how to do this? All other examples are using fixed bounds where the draggable layer can move in. If anything is unclear, please notify me and I'll try to extend this post with more info.
  3. hi this is related to another question i'm currently solving. and i found a solution. its all inside the draggable plugin if i can get a perfect answer for this question. i can update that post and share my solution. my question is how to limit draggable x or y value. eg: if i click and drag, i want to drag only 200px left or 200px top. depend on my draggable type. so how to get this thing done..
  4. Hi is anyone know how to create a mouse follow option with onpress activate draggable handler like this website. if you have any thoughts about this. please share with me.. https://gleec.com/
  5. Hey folks, I inherited some code, which introduced me to GSAP, and I've rapidly become a fan. While trying to implement some mods, I've run into a circumstance I can't find in the docs, so hoping someone here may have some thoughts. Starting point is a "template" <div/> which is static (no GSAP magic). On the mousedown() event for the template I clone a new instance of the div, and make it Draggable. (Note: because I have cloned it without changing offset it is in the same location but "in front" of the original div - color changes to indicate clone) This all works well, however I have to release the original mousedown (take my finger off the button), and then click-and-hold the mouse again in order to initiate a throw of the new object. In a perfect world, I would be able to "transfer" the focus/mousedown state to the newly created draggable div and immediately initiate the throw without releasing the mouse button and clicking again. I've tried passing the .focus() and triggering another .mousedown() but that doesn't appear to work. Not sure if there is a different event I should be firing or somethign else entirely... Any thoughts greatfully appreciated! Thanks, Shaun
  6. JohnH

    Animate before Drag

    Hi there, new to the forum, so first of all thanks for having me! I'm also new to gsap as well. The question I have is; Whenever I use 'Draggable' and I want to animate the object or element that is being dragged, I want to have it animate onmousedown so that as soon as the object is touched it expands. How can I do this as I've always had my animations run when the object is moved instead of animating before being moved. Is there a clever way gsap can do this or do I need to add a mousedown function? Thanks in advance, John
  7. 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
  8. Hey guys, need some help. svg symbol with draggable elements used so far - plain javascript? 1.20.3 tweenmax.min.js 1.20.3 draggable.min.js ok this is not crossbrowser - so look at this with latest chrome! sometimes things are jumping. -> screenshots from my pen (click, click drag - heavy tested)
  9. LanceH

    Draggable bounds

    Hi, I'm struggling to get the bounds setting right using draggable. I have an image that is 5100 x 3560 and I have it inside a div that takes up the viewport. I want to be able to drag the image around x and y until the top edge is level with the top of the viewport, bottom is level with the bottom etc. Using an element as the bounds will let the images bottom edge go all the way to the top of the view port - not what I need. I have gotten close with: var iw = 5100; var ih = 3560; var vw = $('#scroll').outerWidth(); var vh = $('#scroll').outerHeight(); Draggable.create("#test", { type:"x,y", bounds:{top: -(ih-vh), left: -(iw-vw), width: 5100, height: 3560} }); That seems to work perfectly horizontally but vertically, it barely moves. If I remove the height: 3560 from the above, the image can be dragged up the right distance so it's bottom edge is inline with the bottom of the viewport but I can drag it down way past the top edge being inline with the top of the viewport. Feels like I missing something simple? I did have this working fine with scrollLeft and scrollRight using movemove but touch screen devices didn't work at all.. so greensock to the rescue.
  10. Hi everyone, I've been playing around with Draggable and noticed a strange behavior. The mousedown event works fine if I add the eventListener to a draggable element using the lockAxis setting, but the default "x,y" won't trigger it. Am I missing something? I've put a link to a codepen which illustrate the issue. The green box will trigger the mousedown (right-click) and the red one is not.
  11. I'm having several issues, but one I am focused on atm, is that something seems to be conflicting between the draggable.min.js file and my PHP. It messes up the div sizes, when I add <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/utils/Draggable.min.js"></script> to my php file. I'm sorry if this is a really dumb question. Thank you in advance for any help! warehouse.js EquipList.csv working10.php
  12. Hello, I'm trying to create a Draggable slide, using Timeline and ScrollTo. I want it to detect Swiper to the right it rolls to the next target, and when it rolls to the left it comes back, but when it rolls the times it passes the point and it locks. I know qye maybe this is not the best way to solve this, but within my programming level was what I got.
  13. Hey everyone I've linked a draggable to other animations many times, but they always start/stop with the onDrag event. In this case, I need the animation to be based on the draggable onDrag position and it needs to continue animating until I release the draggable. The animation stops on release and the draggable element tweens back to 0. The simplest thing I could think of was using the ticker adding a listener onPress and removing it onRelease. Is this the best way to approach this? Anything more efficient or easier? Thanks.
  14. ** upon further inspection a console.log(Draggable); comes up as undefined, This error is being thrown due to the Draggable module not being successfully included in the component. Good afternoon, I am using the npm library for gsap on my angular project, and have been attempting to implement this into an angular component. Error The error I am receiving is "ERROR TypeError: Cannot read property 'create' of undefined" Reference I have a fairly standard angular4 component pictured below. I did the standard "npm install gsap" I include the import statement for Draggable according to the npm repo for gsap Solutions tried I've looked on forums, and some past answers from 2016 say to include the library with a link in webpack, however, it seems like it would defeat the purpose of having a node_module to import.
  15. Hi all, been struggling with this for a long time now. Is there a way to tween a draggable, more specifically a type:"scrollLeft" element's position by clicking a button? Think of a draggable, scrolling left and right carousel - with a button. When the button is clicked the draggable element slides to the right 300px. I know there are methods to enable and disable the dragging, but I don't see a way to target the actual moving element. Even to manually go in and target the draggable item with a tween might work... but I can't seem to even find what moves! Thanks for any help you can offer!
  16. Hello friends; First of all my English is bad, so I apologize. I'm new in GSAP world, I am studying a carousel Swipe provided by another member of the forum. following link: http://codepen.io/bdang/pen/pJyYEO My doubt be the next point, when you run the onPressed event in Draggable in the middle of execution of TweenMax, it overwrites the position x performed in transition by Tweenmax.to (), is there any possibility to disallow the onPressed or the default event while the animation TweenMax is active? Thank you.
  17. Hi, Is it possible to keep the OnClick event on the Draggable to be triggered including when the disable() method has been called on the Draggable element? From the Draggable documentation, the method disable() should disable the Dragging, not the whole element and its events. But it does. Using a JQuery.click on the element doesn't seem to be an option, as the click event is triggered during drag and drop, and using the mouse pointer location does fix the click on drag issue, but then the whole prevent bubble event gets messed up, and when there is a button inside the element. You can see it here. The only feasible way would be to make the OnClick event from Draggable work always, inclusive when disable() has been called. Is it possible to do so without having to change the Draggable.js library?
  18. How do you adjust the grid self to modify the size of the blocks and fit perfectly? please help
  19. This is kind of a follow up to my response about Draggable being an excellent tool for handling different types of mouse and touch interactivity. https://greensock.com/forums/topic/12477-inspiring-html5-banner-examples-with-gsap/?p=68431 I would love to see Draggable expand out to support more types of interactivity, like with gestures. Development for Hammer.js has been on the decline for some time now, and there's not a lot of other options. Interact.js is probably the next best one. It's been around for awhile, and has all the bells and whistles, but it's not for beginners. For example, I thought the SVG demo on their site was kind of neat, so I created a version on CodePen. Check it out... http://codepen.io/osublake/pen/5008b47d7eff5ee86b30ba22cdbe4818?editors=0010 Hope you like working SVG matrices. That is definitely not something your average user would be able to figure out. With Draggable, this is all that's needed for the dragging. Draggable.create(handle, { onDrag: function() { point.x = this.x; point.y = this.y; } }); Pretty simple, right? http://codepen.io/osublake/pen/02f36f1d867ba61abff89536414f5982?editors=0010 But wait. Something's not right. It's not snapping to the points. Using the current API for Draggable, that's going to be really hard to do. I've brought up needing x/y values at the same time with the ModfiersPlugin, but Draggable really needs this. I want to build a node editor like this, with draggable nodes and port connectors. To see how xy snapping might work, I modified a line of code to pass in both values around line 1708. x = snapX({ x: x, y: y }); That's enough to hack a demo together. Check out the simple point in circle test I'm doing. Draggable needs something like that. Pass in an array of points with an optional threshold. http://codepen.io/osublake/pen/NdKvYb/?editors=0010 Now we're getting somewhere! But why stop there? It would be nice if Draggable could keep track of some additional properties, like the delta value between events. This would be crazy useful. Using the delta value, you can do stuff like move other objects alongside what you're dragging, or even mirror them, like a Bezier handle. Check it out. The only thing I'm doing is setting the x and y properties to the negative delta value. That moves it in the opposite direction. Now you can do trigonometry without trigonometry! http://codepen.io/osublake/pen/ggYxvp/?editors=0010 There's one other property that would be nice for Draggable to keep track of, and that's the last position. We already know how useful that is as that question gets asked a lot. Here's something interesting you can do using the last and delta values. Connect circles. It's done by finding the mid point, which is the average of the last and current position. The diameter of the circle is the magnitude/length of the delta The faster you drag, the larger the circles will be. It's almost like an event visualizer. http://codepen.io/osublake/pen/OWLjOy/?editors=0010 What do you think? Hopefully you won't have to chew on this for too long. Here's the draggable file I modified. https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/draggable.js And these are the changes I made. Really simple stuff. Just enough to get my demos working. // LINE 1122 this.last = { x: 0, y: 0 }; this.delta = { x: 0, y: 0 }; // LINE 1232 self.last.y = applyObj.data.y; self.delta.y = y - applyObj.data.y; // LINE 1242 self.last.x = applyObj.data.x; self.delta.x = x - applyObj.data.x; // LINE 1738 x = snapX({ x: x, y: y }); .
  20. Hi guys, I am just playing around with the the Draggable plugin and its awesome. As it can be used for not only dragging but also rotate or scroll content, I wonder if there is a way to make it to resize an element onDrag? Has anyone done that? Does anyone know how it could be done? Thanks, Praney
  21. Hello, I'm having a hard time doing a .hitTest with a snap, in case I need my droppable to reach the hitTest in the position of the corner element.
  22. 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?
  23. 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...
  24. 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).
  25. 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