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
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



  1. hi All I did was add the following two lines of code and I got this error. import {gsap} from "gsap/dist/gsap"; import { Draggable } from "gsap/dist/Draggable"; gsap.registerPlugin(Draggable);
  2. Thanks for the amazing library. I've been using it a long time and recently bought the plugins to show how much I appreciate it. I ran into an issue today that I'm a little confused about. I'm new to Draggable and I'm trying to create an off canvas menu that when opened with a button, takes up 80% of the screen width. The user can drag to close the menu on either the menu itself or the 20% gap to the right. I have this part working. The problem is when I try to make it so the user can click the 20% gap to be able to close the menu without dragging it. On the desktop this works fine how I have it set up, but on mobile I have to tap the area twice to get the draggable onClick to fire. Here is a code sandbox showing this. Try on desktop clicking the blue section when the menu is open. It should close with one click. But on mobile, you have to tap first then tap again. https://codesandbox.io/s/vue-gsap-zvrzyo?file=/src/App.vue Any insight as to what I could do better and why this isn't working would be much appreciated!
  3. Hey, https://codepen.io/GreenSock/pen/896549f0a83297debd9111fe9b205a97?editors=1010 Based on the case below, I tried to build a custom scroll bar for a scrollable element with fixed sizes. It works ... But if you change the window size, if the scroll progress is not equal to 0 or 1, then the drag function is disturbed. https://codepen.io/mikeK/pen/c889651f79b9848c71f4a918e94471a8?editors=0010 What am I doing wrong? Mikel
  4. Hey I have currently a Problem with the bounds. I have a element with dynamic elements around. So if I move my element the other elements are shown. If I stop moving the elemens will be removed. The problem is that the right and the bottom borders not correctly working. The 3 elements arround are the dynamic elements. If I stop moving the elements are removed But the bottom and the right corner did not work. My draggable object looks like this Draggable.create(`#${id}`, { type: 'x,y', bounds: { target: '#boundArea', top: 0, left: 0, }, ...otherFunctionsAreHere(liveSnap, onPress, onDrag and onDragEnd) }); bottom: 0 or right: 0 are no available options If I set a height and a width of the white rect to my bounds. The bounds looks like this The text can be changed.
  5. Hi guys! I'm new here and I'm struggling to edit this slider by synchronizing slider index with titles index. It was pretty easy to make it work on nav click, but as you can see it can't count which is the destination index, and it only counts one for titles. Have you some suggestions? Also I would like to add an active class to che center slide in order to make the others with some opacity.. Thank you!!
  6. Hello ! I am using Draggable plugin for drag component with cloneing element. cloneing are working on my version. But is there any way to drag elelemnt to specific box/class(multiple class)/custome box. Like screensort red drag box only drag on bottom row (marked red border). and green will drag in green border full wrapper(with red area too). If in the box already have exits element that will not aapend inside that.
  7. Intro: Theres probably not a simple anwser to this but I wanted to see if someone more gsap experienced than me knew of some cool trick that could help me before I go on to do some overly complicated way of solving my issue. Whatver the case, thanks to anyone who is willing to give my issue a shot one way or another. Context: So, I want to create a component builder that lets users drag and drop blocks in place. As part of this I am using GSAP Draggable to drag and drop an element. The riddle im stuck on at the moment is I want the element to snap into place when its dragged over an area that can receive it. The simple solution is to just use the hitTest() function to detect if eligeble element is hit and then get either the points off that element to use in the livesnap, or get the transforms to match that element or something like that. Problem is that in a more complex example, for my use case, I dont actually want to manually create a uniqe function for every possible snappable area since there might be a lot. The ultimate solution would be if I could somehow dynamically fetch whatever snappable element we have hit. But as far as I can tell, from the docs, the hitTest() doesnt actually return the hit element, it just returns a boolean which kinda forces me to do something uniqley for each individual element that can get hit. Question: Is there a straight forward way to dynamically get whatever element I hit with the hitTest()? Codepen: Ive provided a codepen that acts like a massive simplification of what I am trying to do just to narrow it down to exactly what I am asking and making easy to experiement with solutions. Hope that makes it simpler to understand.
  8. Hey guys, it's Beholder4096, back again with another obscure bug. This time, the mind-boggling infestation here has taken me to discover two possible ways this bug can be demonstrated, so please bear with me.. I have an object (green in the CP example) which I need to make draggable, after user clicks another object, that is overlapping it (yellow in the example). When the overlapping yellow box on top is clicked, the draggable instance of green is created and green becomes draggable. So far so good. However, if I rerun the example and click the yellow and hold mouse button without movement and then release, the onClick of the draggable object doesn't fire! (all other events do fire, even onDragEnd() even though we were not dragging). I know it looks like it's for obvious reason.. But this behavior makes UI extremely inconsistent in my use case where I am very depending on this to work! Here the user can either (1) click the yellow overlapping object and release immediately (and the green object runs the onClick as it should) or the user can (2) click the yellow, hold the mouse for dragging and drag the green object to the destination. I have noticed that the exact same bug happens when clicking ONLY green object and releasing it without movement, but only when the Draggable.create() code is in the inline javascript onmousedown event. Please refer to the CP example where I have implemented both ways the bug can show. I must stress all of the other draggable events run ok, even the onPress event, which is also quite illogical since when I click the yellow box I never pressed on the green. And in the case of inline-js, I literally click the green and onPress registers but onClick doesn't work. While onDragEnd fires as well even though I totally didn't drag, just clicked. Aah, these crazy bugs, how come no one ever notices them? Please, PLEASE fix this as I would have to do a super-crazy workaround if the 2-box overapping scenario didn't work as it should. tl/dr: Click yellow box or green box. Do not drag. What happens: pretty much nothing, just draggable element gets to the front. What is expected: the onClick event of the draggable green box should fire and show alert.
  9. Hello, I have create an image sequence that users interact with using Draggable. The sequence is supposed to 'snap' to certain frames and I've written a function to do that. The problem I've encountered is that the cursor position is no longer accurate after the 'snap' occurs. If a user clicks and drags the image sequence and releases the click, the image sequence moves through the appropriate images to the destination slide. When the user then clicks and drags again, the image sequence 'jumps' to a slide number of slides away - which isn't smooth. I'm wondering if I've missed some way of resetting a cursor position variable, or if i even need to do this in this manner. Any suggestions or pointers are welcome, thanks.
  10. Hello, I've created a projects slider with interactive draggable projects menu. The snipped runs bi-directionally - if you scroll through projects it uses scrollTrigger to update the projects menu, and in reverse - if you click items in the menu, it scrolls the website to the chosen project. The problem is with the draggable projects menu, it works great on desktop and on android firefox, however in Android Chrome and on native Samsung Browser the links don't always work. It changes colour, as if the hover event fired, however touch/click doesn't register. I've tried adding Draggable setting of minimumMovement up to 20, but it doesn't help, and once I touch the link it visibly moves a few pixels so it seems like the dragging overpowers the click/tap. Please check out the codepen example in Android Chrome in landscape mode. (Sorry for the messy code, it had to be extracted from a bigger code). Thank you in advance
  11. I am trying to make something like thisI want to set specific position of x if value of drag on x axis is greater than defined number everything is working just fine but without transition or I can say without bounceEffect . Additionally I also want to reset position of draggable element on focusLost
  12. Hello humans, I am building a range input Vue component, like so many before me. Nothing fancy, but it should behave perfectly. It has to: be draggable ✅️, react on up-right/down-left (not in demo) ✅️, gracefully snap to mouse position when mousedown on the slider 'path' ❌️ and continue dragging ✅️, and also gracefully snap to mouse position on click on the slider 'path' (or rather to the nearest snap point) ❌️. But it: Jumps all over the path when mousedown--move a bit--mouse stop (and similar combinations of movement). Overshoots, or stops moving on mouseup without reaching the mouse. About the code: I omitted a lot of updating the styles on drag and such, but I did leave a couple of examples how I would go about it, i.e. using gsap.getProperty(slider.target, ...) so you can tell me if it should be done differently. I am accessing the slider target via slider.target because this is logging as udefined in my Vue SFC with <script setup> sugar. Any ideas about that? Another question is regarding updating Draggable. I sprinkled a couple of onComplete: slider.update to try and keep everything in sync, but I didn't achieve much. Or did I? How to unglitch it? Help me understand. Stevan
  13. So I am trying to rotate a circle and snap it to 90 degrees but I can rotate it but It doesn't trigger the onDrag en snap function. I don't know why, I also don't get any errors. let rotationSnap = 90; Draggable.create(vinyl, { type:"rotation", OnDrag: () => console.log('works'), snap: function(endValue) { console.log(endValue); console.log(Math.round(endValue / rotationSnap) * rotationSnap) //this function gets called when the mouse/finger is released and it plots where rotation should normally end and we can alter that value and return a new one instead. This gives us an easy way to apply custom snapping behavior with any logic we want. In this case, just make sure the end value snaps to 90-degree increments but only when the "snap" checkbox is selected. return Math.round(endValue / rotationSnap) * rotationSnap; } }) }
  14. Hi there! I am trying to create a slider that shows a number, depending on its position (like an input range with a number directly on the thumb) using the Draggable plugin. I have defined a bounds object to keep the slider within these bounds. However, since the thumb's size increases during dragging, the thumb does not stay within the bounds all the time. Draggable allows the thumb to move into a position that would have kept it in its original bounds (not its updated bounds). The issue becomes apparent if you try to drag the slider from 1 to 100 in one go. Notice also, when you arrive at 100 and then let go, the slider snaps into the correct position. How can I change my setup to make sure that the slider stays within the bounds at all times? Thanks!
  15. hi guys, i need your help, it's been a couple days that i'm trying to solve this. i have a box wich contains SVGs that are draggable, that box needs its box-sizing to be "content-box", and the draggable SVGs bounds needs to be inside the box (not touching the borders) that's why i created a bounds-box which take 100% width and height of the parent box, and set the draggable bounds to that bounds-box, it works fine , the only problem is when i zoom in or out, the bounds change after dragging the svg around and u can see that the bounds got -1px on every side. thank you.
  16. Hi! I've got a row with elements which can be dragged inside dropzones. All is working well but I can't get the dragged objects to fit exactly within the dropzone. Can someone point me in the right direction? Thanks in advance, Pieter
  17. I've a draggable bar, which can be drag horizontally. What I want to do is, on page scroll Is it possible to trigger draggable event to drag? Or is there any other way to achieve this. I already posted this question in StackOverflow but didn't get any response, So if someone could help me on this that would be appreciated.
  18. Hi all, Looking for a hand or some advice if possible. I've created this codepen (below) and it works well enough when you drag the content horizontally but I would also like to be able to scroll with the mouse through the content, very much like the functionality of this website - https://antoni.de/cases/ I'm fairly new to Javascript and certainly GSAP, so any input is much appreciated. Thanks Jon
  19. Hi, let me start by saying i love gsap and the hard work you guys put in it, since thats out of the way as you can see in my code pen i have two problems i need to solve. 1. When i drag and click on a card before inertia velocity go to zero the cards container animation position rest to x zero break. 2. When a crad onclick happens i want the animation drag to stop and when clicked again or a close button to reverse animation and rest where the card was. I feel am close but i need help 😅
  20. I have a circular input with a width and height of 80vw/vh (depending on portrait or landscape).. GSAP Draggable uses the translate3d for the draggable component, but when I resize my window it doesn't center my #controller element anymore because of that.
  21. I hope he supports both type: 'x, y' and type: 'rotation' But if I set it this way, it's always the last I went through Greenlock draggable's documentation and couldn't find it My English is not good, but I still like to read our documents, I hope you can help me with that. thank you 🙏
  22. I'm trying to build a slide-out menu in an app that runs within an SVG tag and everything works except the grid snapping. Codepen I've tried using console.log(endValue) where the Codepen says alert() but it doesn't seem to get triggered. I was thinking that maybe snap was a feature inherited by the ThrowPropsPlugin (not using that) but I wasn't sure. The idea is that the menu element (#testE) can slide halfway out of screen OR fully visible.
  23. Hi everyone, I'm trying to create an image sequence that can be played backwards or forwards by scrolling the page up and down. But I also need the sequence to be controllable using a video style progress bar. Using some of the code that I've copied from these forums I've managed to get the image sequence working and I've also managed to create a play bar control with a playhead that can be dragged left and right. But I can't get the playhead to control the current image that is displayed in the image sequence. In the code for the image sequence I specify the number of frames, so I'm assuming I need to divide the length of the progress bar into an equivalent number of 'units' and then advance or rewind the image sequence every time the play head is dragged by one 'unit'.
  24. Hi there draggable is working fine on my touch device, but not on my desktop using a mouse – latest Firefox Mac, haven't tested any other browsers. Anyone have any ideas as to why? In this specific case the element I'd like to be draggable is placed within an anchor-tag and I suspect that's where the problem lies. Adding `dragClickables: true` doesn't seem to make a difference. I could change the HTML, but I'd like to avoid that if possible, as this would require some amount of work and testing on project that is live. Thanks for the help!
  25. I am running into performance issue when I have to deal with multiple draggable instances about 80 instances on mostly Win10 and ChromeBook. MacOS and ipad are ok. here is my CodeSanbox; https://codesandbox.io/s/gsap-rerendering2-cxus0?fontsize=14&hidenavigation=1&theme=dark the other one with useRef https://codesandbox.io/s/gsap-rerendering-3g4zk?fontsize=14&hidenavigation=1&theme=dark