Search the Community

Showing results for tags 'draggable'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 / JS
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







Found 449 results

  1. HaunGo

    swipe & flick ?

    I thought there was a GSAP plugin for swiping and flicking ? good for mobile . Am I thinking of the Draggable plugin ? I just need to swipe/drag/and flick while that motion also controls a separate TimelineMax. Any thoughts or suggestions ? Also, I'm looking to do a bit of scroll hijacking.. so, if theres GSAP related solutions for that, I'd love to know! Thanks !
  2. joshlopez

    snap to center of div & replace

    Hello all, I am new around here. I am having 2 issues currently. I am trying to make my draggable boxes snap to the center of my target box. Currently they are snapping way off. lol When a new draggable box is put on the target box, i need any other box currently on the target box to move back to its original position. Thank you for your help, I really appreciate it.
  3. This code was inherited from @blakebowen draggable loop however his implementation is using jQuery and I am trying to convert to regular JS. Any thoughts on why this may not be firing? var $overflow = document.getElementById("overflow"); var $viewport = document.getElementsByClassName("viewport"); var $wrapper = document.getElementsByClassName("wrapper"); var $boxes = document.getElementsByClassName("boxes"); var $proxy = document.getElementById("box1"); //$("<div/>") var numBoxes = 4; var boxWidth = 350; var boxHeight = 250; var imgWidth = boxWidth - 6; var imgHeight = boxHeight - 14; var viewWidth = $viewport.offsetWidth; var wrapWidth = numBoxes * boxWidth; var progress = 0; var xMin = 0; var xMax = 0; TweenLite.set([$wrapper, $viewport], { height: boxHeight, xPercent: -50 }); TweenLite.set($boxes, { left: -boxWidth }); // for (var i = 1; i <= numBoxes; i++) { // // var src = "" + imgWidth + "/" + imgHeight + "?random=" + i; // // var num = $("<div class='num'/>").text(i); // // var img = $("<img />", { src: src, width: imgWidth, height: imgHeight }); // //var box = $("<div class='box'/>").append(img).append(num).appendTo($boxes); // var box = document.getElementsByClassName("box") // console.log(boxWidth) // TweenLite.set(box, { x: i * boxWidth, width: boxWidth, height: boxHeight }); // } var animation =".box", 1, { x: "+=" + wrapWidth, ease: Linear.easeNone, paused: true, repeat: -1, modifiers: { x: function(x, target) { x = x % wrapWidth; = x - boxWidth > viewWidth ? "hidden" : "visible"; return x; } } }); Draggable.create($proxy, { type: "x", trigger: ".wrapper", throwProps: true, // onDragStart: setRange, onDrag: updateProgress, onThrowUpdate: updateProgress, snap: { x: snapX } }); $overflow.on("change", applyOverflow); $(window).resize(resize); function snapX(x) { return Math.round(x / boxWidth) * boxWidth; } function updateProgress() { // var norm = normalize(this.x, xMin, xMax); animation.progress(this.x / wrapWidth); } function resize() { viewWidth = $viewport.width(); animation.render(animation.time(), false, true); } function applyOverflow() { if($overflow.prop("checked")){ TweenLite.set(".wrapper", {overflow:"visible"}); }else { TweenLite.set(".wrapper", {overflow:"hidden"}); } }
  4. reference: var element1 = green; var element2 = red; if (Draggable.hitTest(element1, element2)) { console.log('HIT!'); } #green { transform: rotate(45deg); } Always triggers HIT! everytime element1(green) enters the area demonstrated as "blue box" even if it doesn't hit element2(red) demo: see attached image Is there any possible way to fix this issue as I wanted to trigger 'HIT!' only when green touches red (given that I want to rotate this image/div), Thanks in advance
  5. Seb-AS

    Draggable + zoom out

    Hi, It's my first time using gsap with react(used a lot in as3), and I've a lot of questions if someone can show me an example o guide me in the right direction. I need to make a map like "google maps", the map it's a div with a background-image and inside svg with point. The issue I'm having it's if I drag the map the +/- buttons scale the map but in the wrong position, my idea it's if I scale up the the map then drag then scale down it should come back and animate to the starting position. Now I'm forcing to move to the starting position if the scale it's equal to 1 window.TweenLite.set(, {force3D: true, ease: ease, scale: minScale, transformOrigin: "center center", x: 0, y: 0, z: .001}); Hope it's something easy to fix. Thanks
  6. elrojo

    Multiple Drag Instances

    Is it possible to have multiple drag instances? Attached pen keeps failing... var count; for(count = 0; count < 2; count++){ console.log(count) Draggable.create("box" + count, { bounds:"#container", edgeResistance:0.5, throwProps:true, lockAxis:true, onDrag:function() {"original" + count), 1, {x:this.x}); }, onThrowUpdate:function() {"original" + count), 1, {x:this.x}); } }); }
  7. benoit

    draggable rotation value

    Hi, I use the draggable plugin. Is there a simple way to return the rotation value between 0 and 360 deg ? I play with something like that : var r = (r + 3600) % 360; It's work but, it's not proof. How can I fixe this?
  8. Deepak Oberoi

    How to limit Draggable to a path

    I want to limit a Draggable within a Path given for an AVG Layer. if that's possible? I read about bounds but it says container or XY cordinates can be passed in bounds if we can pass an SVG path to bounds? something like
  9. How can I clear z-index from a draggable after releasing it, so that new page elements don't appear beneath the draggable item?
  10. I am using a draggable knob along an svg path. The path is a quadratic bezier curve which has the y coordinates going up and then down. How should I progress the draggable instance so that I am able to fill the path while dragging the knob on the path? To simply put it, I want the path to be filled while dragging the knob and the portion of the path to be filled should be only upto the knob. Also the mouse pointer should be in sync with the draggable knob. Any suggestions or leads are appreciated.
  11. Hey guys, I feel like calling kill() on a Draggable instance should probably clean up after itself and reset the DOM element it was invoked on to it's pre-initialization state. Currently it leaves 'user-select: text' on the inline style attribute of each element, overwriting any default user-select settings that may have been previously defined (inline or css). See line 903 in Draggable.js _setSelectable = function(elements, selectable) { var i = elements.length, e; while (--i > -1) { e = elements[i]; e.ondragstart = e.onselectstart = selectable ? null : _emptyFunc; _setStyle(e, "userSelect", (selectable ? "text" : "none")); } } I can of course manually clean up the style in my implementations (which is what I currently do) but I think it would be much cleaner if Draggable would keep an internal reference to any style properties it is going to modify and reset the element to that reference after the Draggable instance is killed. Sorry for being nitpicky. Keep up the great work! Jonathan
  12. I have taken the Codepen for "Draggable with "droppable" logic" (located here) and forked it and rewritten a lot of it to to get the effect i am looking for. basically, i do not want any draggable item to EVER overlap any any other draggable item. I spent a good part of the morning today searching the forum and reading up in the docs trying to think of some form of simple collision detection. The idea being to detect a collision and have a simple collision event that would make the divs bounce off of each other. that is not built in to gsap (should be!) and I have not found anyone on the forum who has successfully done it. So I must try. What I have in my sample is the result of banging my newbie head on my monitor all day! it is not 100% collision detection (like I'm used to seeing in Unity) but it does prevent overlaps in a clunky sort of way. If you drag, say, box1, over any other box it will be tweened 100px repeatedly until it is no longer overlapping. Additionally, there is a recursiveness in the function calls. If, while moving box1 away from box2, box1 then overlaps box3, the recursive will continue to cycle the functions and the tween will be repeated until box1 is no longer overlapping any box. This works regardless of which box you drag around and drop. I say it is clunky because it tweens 100px, pauses, tweens another 100px, pases...and so forth until the dreaded overlapping is cured. Where I am stuck is replacing the 100px with the amount of overlap (plus some small amount so the box ends up a little bit away from the last box it overlapped). I have commented the code so you can see the varible names, etc. and understand what i am struggling with. As an added bonus, it would be nice, but not strictly necessary, to remove the clunkiness I mentioned above. One final comment, it may appear that this if for a game. It is not. I would do this in Unity if it were a game - or maybe Buildbox. This is actually just one step along the path I have chosen to build a "unique" interface for a desktop app I want to build using Electron.
  13. Hi! I am taking Diaco's SVG path range slider as a reference and implementing it for some other types of SVG paths like curve and smooth curve. In Diaco's case, he has given the value 'bezier' and the type as 'quadratic' for the SVG path type quadratic bezier curve. What value should be given for a curve and for a smooth curve?
  14. TheAlexPorter

    Draggable Crashing Ionic 2 / Cordova

    Hi everyone, I'm experiencing odd behavior. Whenever I reference Draggable ANYWHERE in my Ionic 2 app, Cordova crashes and throws this error: "Uncaught TypeError: Cannot read property 'toLowerCase' of undefined" (screenshot included below). When I run the code in the browser doing "ionic serve", draggable works and everything is great. On the emulator or build, the app crashes. If I remove / comment out draggable, the app runs. There isn't any issue with TweenLite, just Draggable. Has anyone else experienced this before?
  15. Refer to the Codepen which is the autoscroll demo from GreenSock. First off, I am totally new to GreenSock. I love the smooth functionality of this right out of the box! I need some additional things for my app and I am hoping for some pointers to get me rolling in the right direction. (1) If you throw the green div and it flies out of view I want a corresponding button for that div (maybe in a top nav bar?) that will smoothly scroll the autoscroll area to bring that div back to the center of the screen. This will make it easy to find that "lost" element. (2) It would be useful to have four transparent bars (left, right, top, bottom) that always live on the edges of the autoscroll container and four squares (top-right, bottom-right, bottom-left, and top-left) that always live in the corners of the autoscroll container (maybe positioned outside of the autoscroll container?). What I mean is that when scrolling occurs these eight elements always remain around the edges of the autoscroll container. Then when the mouse hovers over these areas the autoscroll area scrolls in the corresponding direction. Note that I do not intend for this app to be used on mobile devices as ultimately I intend for this to be built out using Atom's Electron framework as a desktop app. Because of that I am not concerned with the fact that hover is a problem on mobile devices. It would be even better if the scroll speed was controlled by how far the mouse is inside of the border div. For example, considering the right side bar, as the mouse enters the bar from the left the scrolling is slowest and the further to towards the right edge of the bar the mouse gets the faster the scrolling becomes. I Hope I made sense there! Lastly, this should not interfere with the default behavior of the draggable autoscroll. That is, I still want the autoscroll to happen based on dragging a div to the edge of the container. Any advise you have to offer on these two functionalities would be very much appreciated.
  16. gaggo

    Draggable snap to selector

    Hi there, just got a club license to use the amazing ThrowPropsPlugin in combination with `draggable` and `type`:`scroll`. Now I would very much like an option to make the scrolling snap to certain elements, if flicked. Is there an option or approach for this?
  17. crabcreative

    Draggable with cta

    I'm building this "cards" that stack on top of each other and you can drag them to the right to remove it from the stack and to the left to bring the previous one back. This cards also have CTA, trough a "read more" button or, if it's an image, the whole card is a CTA. The "problem" is that the CTA prevents the card from dragging, which is an expected behaviour. Is there a way where a user can drag the cards and still be able to press the CTA? (fyi, the user can drag anywhere on the parent div of the cards to drag them).

    Scrolling with vertical draggable

    Hi all, I'm attempting to create a vertical draggable with for a "fashionable" effect, an everything works as expected on Android, but not on iOS. On Android, the page doesn't scroll when I swipe up on the draggable, and scrolls only when I tap outside of it. On iOS, bot IPhone and iPad, looks like the page has a priority on the draggable (or the swipe event "bubbles" from the draggable), thus the draggable stays almost in the same position, and the page scrolls. In this pen, the gray draggable scrolls into the black box, and overflows it for a maximum of half of the draggable height. How can I get the same behavior on the platforms? Thanks in advance! (It's better to test the pen in full page mode:
  19. The newer version(s?) of Chrome are logging a warning about event listeners declared without a passive state. It looks harmless for now, I just wondered if there were plans to add this functionality, or if there's an existing option I'm not seeing that I just need to add. So far I'm only noticing it with Draggable.
  20. Hi, I'm having real issues with a draggable map I've created, specifically on devices using iOS. My animations all run nicely, however when I press and try to drag the map around, there's a good 4-5 seconds before the page responds, and then the move happens instantly, rather than smoothly. If necessary I can provide you with a link to view the development site if that helps, however, I'll need to send it privately if possible? There are a number of layers creating the map, all stacked on top of each other - might this have something to do with it? Any help you're able to give me would be greatly appreciated. Kind regards
  21. SimonDucak

    Background Slider and draggable

    Hello, I tried create background slider where slides are stretched on window height and width. Snaps work good because i tried something similar but only in smaller dimensions. I think the problem is in the distance. Which must drag the element so that the slider changes its position to the next snap. I searched solution how can i decrease this distance. But i didn't find something. Thank you for answer.
  22. Hi Everyone! I am working on an audio player that is controlled by a draggable element using GSAP. The audio and timeline animation work fine if the user pauses the clip before dragging the element, but if the user tries to drag the element while the audio is still playing the timeline breaks and returns a timeline.time() = 0 no matter what I try to pass into it. Any help would be greatly appreciated! Thanks!
  23. SimonDucak

    Draggable snap

    Hello, I created container and box. My snaps don't work but when i use liveSnap instead of snap. Then this work well but is only jump without animation. I read documentation but i don't understand this. How can i create snap with animation? Something like this when checked button ( Snap end position to grid ). Thank you for answer. Sorry for my English.
  24. mperitz

    Force onDrag to Fire

    Hello, I am working on assisting a colleague in automation testing of our product. We use GSAP Draggable to drag a video in the x direction to close it. The automation library he uses (Appium) has deprecated its "swipe" mimicking functionality, so it is up to me to write a javascript script to simulate the swipe event. So far I have been able to simulate the drag start and drag end events by creating pointerdown and pointerup events and calling draggable.startDrag/endDrag with the pointer events as arguments (we have the Draggable class saved on our window - I use Draggable.get(element) to find the draggable instance). I know this is working because the onPress, onDragStart, and onDragEnd events are firing. However, I do not know how to simulate the dragging itself. I must do this, because in our onDrag callback, we are changing state which the onDragEnd event uses to determine whether or not to close the video. My question is, how can I force the onDrag event to fire? Unfortunately I cant really reproduce this in a codepen because our code is not open source I have tried using the draggable.drag() method, but that does not work.... HAAALP! Thanks! Mike
  25. Hi all, I want to call a function while throwing. For dragging we have onDrag with OnDragParams. But is there something like onThrow? I want to detect current DIV on position while its getting thrown. Would be amazing! I hope for an answer / workaround to fix this. Working code (but without onThrow) : Draggable.create(PB[m_].el.contentDraggable, {type:"x", bounds: PB[m_].el.contentWrapper, edgeResistance:0.2, lockAxis:true, throwProps:true, onDragEnd:PB[c_].dragEnd, onDrag: PB[c_].whileDragging, onDragParams:[]});