Search the Community

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

Hi Guys, I want to start a video via a slider, which is built with draggable and inertia. This works in Chrome and Firefox. Safari interprets the action after onThrowComplete as autoplay and prevents playing the video, due to it's autoplay-policy (except video is muted). However it seems to be OK for Safari if I start the video with a ordinary button (at the bottom of the example). Any idea how to solve this?

Hi, This is my first post here and I'm a fresh member of the BusinessGreen Club. I've just set to create a visual editor for creating multi zone (div) content for digital signage and GSAP seem to have the perfect set of tools for that. I have used the example from the forum post below to get me started. This will move into our Angular app eventually and the divs will be angular components that the end user can drag in from a library of contents. So for my question, I'd like to be able to snap the divs edges and perhaps even corners/vertices to each other. I found the hitTest method but all examples I can find where snapping is involved is on centering a div on top of another "drop zone" div. Grateful for any help.

I want to make a sort of wheel of fortune. But the wheel is now stopping too quickly. Is it possible to change (double?) the Momentum-based animation of the wheel causing the object to glide gracefully to a stop? There is no friction property, is it? I hope there is a simple solution. :)

Hi guys, I just want to contribute with my findings in case others ran into this. I had been struggling getting GSAP's Draggable to work with Next.js and have finally found a solution. Next.js does Server Side Rendering (SSR) so pages rendered on the server had issues loading the GSAP NPM modules. Please note that pages worked just fine client-side. ERROR: import TweenLite, { _gsScope, globals, EventDispatcher } from "./TweenLite.js"; ^^^^^^ SyntaxError: Unexpected token import To resolve the issue with GSAP not being transpiled, I installed next-plugin-transpile-modules npm install --save next-plugin-transpile-modules Then I modified/created my next.config.js file according to their instructions on their NPM page. https://www.npmjs.com/package/next-plugin-transpile-modules Draggable finally worked after that (only if throwProps was set to false and you did not import ThrowPropsPlugin). However, if using a plugin like ThrowPropsPlugin.js it would display an error message like: TypeError: Cannot read property 'defaultView' of undefined Around line 515 of the ThrowPropsPlugin.js file, I changed it: //FROM THIS: _doc = _gsScope.document, //TO THIS LINE I FOUND IN DRAGGABLE: _doc = _gsScope.document || {createElement: function() {return _dummyElement;}}, After that, I just did "npm run dev" and the pages rendered on the server side were fully functional as expected. Hopefully this helps somebody out! Guys at GSAP, is there any harm in changing that line in the ThrowPropsPlugin? If not, would it be a good idea to update the plugin and other plugins for others who purchased the membership with GSAP so they don't run into this issue that I encountered?

Hello, I want to control a rocket image with a virtual joystick. I was able to create the joystick and rotate the rocket when the joystick is dragged (thanks to gsap's draggable plugin). However I am not able to change the rocket's position when the joystick moves. Basically, I want to make the rocket move as long as the user drags the joystick and change direction according to the joystick. I also want to increase the rocket's speed as the circle inside the joystick moves farther, but I suppose I can do that with timeScale() method. I tried changing rocket's position but it simply stops after some distance even though I am still moving the joystick. Any help would be very helpful since I am stuck on this since a long time.

I'm running two completely separate functions and loading 4 libraries/plugins: /gsap.min.js /TweenMax.min.js /Draggable.min.js /ThrowPropsPlugin.min.js function #1 is uses the gsap.timeline tool function #2 is uses TweenLite, Draggable and ThrowPropsPlugin. #1 works great if I comment out the TweenMax, Draggable and ThrowProps scripts. #2 works great if I comment out the gsap.min.js script. Is there some obvious reason why they won't work together?

Hey ya'll, New to gsap and draggable, trying to mimic a "Pull Down to Dismiss" effect like you will commonly see in native mobile apps. I am sure I am doing to something wrong and could really use some guidance. I have to set my animation duration unrealistically high to accomplish the effect which makes using the then promise from gsap.to - overall where I am at feels hacky, but I can't seem to find a good path in docs. Below is an example of what I am hoping to achieve on all popular mobile browsers: Pen:

Dear everyone: I would like to drag an element smoothly(have some delay), like description below(I copied it from scrollTrigger's Doc) Soften the link between the animation and the the(typo?) scrollbar the drag movement so that takes a certain amount of time to "catch up", like scrub: 1 would take one second to catch up. when using Draggable plugin, but I don't know if it is possible. (I think Inertia is not the solution because it's about after dragging) The codepen demonstrates what I mean if no one could understand my weird English. Also I would like to know is it a bad thing to call gsap.to in mousemove EventListener ? The event fires so many time in one second, even before one gsap tween can properly finished, Will this cause any issue? I just start learning code a few months before and I can't find the answer anywhere else, thank you for reading my forum until here, and any answer will be very very appreciated!

So, I'm currently building an animated div container for my app but in doing so, I am encountering a bug, I suppose. As I did set thedragClickables to false in the Draggable.Create() object but the results of setting it to false is inconsistent on touch screen devices. If I elaborate the situation here, If I directly tap the container without dragging it initially the route is switched without any issues. However, when I drag the container and then tap the button it works sometimes and sometimes it doesn't. Tested it on iPhone 8, iPad and laptop touch screen Any help is greatly appreciated. PS: The codesandbox provided is a extremely scaled down version of my app. I do have other stuffs like react transition groups which I think shouldn't effect this issue. However if it's needed to be included I can do that as well. Edit: It works flawlessly on desktop though. No issues there CodeSandBox Link - https://codesandbox.io/s/keen-rhodes-f0r55?file=/src/index.js:0-231

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

Hello! We recently upgraded to the latest GSAP (jumping a major version) and have got a problem with some tests failing since. During some of our automated tests we need to be able to click on draggables, and have the `onClick` action fire for certain behaviour to happen which can then be asserted against. Unfortunately, the Draggable's `onClick` listener does not fire upon a click event. I have attached a codepen which I hope shows the example clearly. It sets up a Draggable with an `onClick` listener which should turn the square blue when it is clicked. You can try this manually to check the logic works. It also has some code which just fires a click event on the draggable element. You can see that this does not turn the square blue. I'm certain there is a reason (potentially to do with it differentiating between clicks and drags) that this doesn't work, but wondered a) If it should work b) If not, whether there is a reasonable workaround we could use for our automated tests to trigger clicks on Draggable elements. I have also tried with different more granular events i.e mousedown, mouseup etc. but still no joy. Thanks in advance for any help you might be able to offer, and let me know if anything isn't clear so I can provide better examples. Luke

I have a draggable slider/"panner" that is constructed a little differently due to some demands: - It has to work with percentage widths for the slides / flexbox - It has to work with differing slide widths This has worked all right in my solution, but now I'm trying to "loop" the slider and all examples I can find are using a draggable connected to a tween's progress and I'm not able to see how I can make this work in my situation. Any pointers here? I'd suspect I'd have to do some dom manipulation by moving the first slide to the end etc but I'm not really sure where to start. Any and all advice appreciated!

I keep getting a lot of questions asking about creating sortable lists with Draggable, so I'm just going to make a post about it. My sortable grid example is outdated, and I no longer use that technique, so I'm not going to update it. It relies on hit testing, which I would no longer recommend doing for grids/lists. A better way is to create a model of your list, and map the location of your draggable to that model. This is real easy to do using arrays. You can use the index of an array to represent a cell location in the grid. Draggable already creates an array for you if you use the .create() method, so you could use that if you really wanted to. But first you need to figure out the size of the cells in your list. If everything is uniform, you could probably just divide the size by the number of items in that dimension. If my list is 400px high, and there are 4 elements, the cell size for a row is 100. Notice how the cell size may not be the same size as your element. The cells are in red. When you drag, you can figure out the index of a cell like this. var index = Math.round(this.y / rowSize); This can result in errors if you drag outside of your list, so you should clamp the values like this. var index = clamp(Math.round(this.y / rowSize), 0, totalRows - 1); function clamp(value, a, { return value < a ? a : (value > b ? b : value); } Now you can easily determine where everything is. You also need to keep track of the last index, and compare it to the index you calculate while dragging. If they are different, this means your draggable is inside a different cell, so you need to update your layout. Before you can change the layout, your first need to change the items in your array. Here's a function you can use to move stuff around in an array. arrayMove(myArray, oldIndex, newIndex); function arrayMove(array, from, to) { array.splice(to, 0, array.splice(from, 1)[0]); } Now that your array is in the correct order, you can update the layout. If you were using an array of draggables, you could animate the entire layout like this. myArray.forEach((draggable, index) => { if (!draggable.isDragging) { TweenLite.to(draggable.target, 0.4, { y: index * rowSize }); } }); That's pretty much it! Doing it this way is not only easier, but it performs a lot better, making it really smooth. I made a demo based off of this Framer.js example. It's about 100 lines of code, and is pretty easy to understand. For comparison, The Framer.js example is about 180 lines of code.

Hello GreenSock community ? hope you are well and keeping safe!!! I am trying to build a draggable carousel, which when you click an element it expand and animate its content in, other element shrink accordingly. And once a panel is open if you drag the next or the previous panel, it should open the next panel while being drag. So far I have a responsive draggable carousel in React; essentially @OSUblake draggable carousel example but using react (Thanks @OSUblake !!!) https://codepen.io/tomsah/pen/vYKqqVx?editors=0010 I have created the basic animation that I would like to happen when a user click one of the carousel item https://codepen.io/tomsah/pen/WNxqqEz I have tried a few things and I never get the result I am after ?, Element are getting updated using onClick but their position is always off, and when I drag again the carousel it is getting worse I am not sure how to properly update the carousel item with, X & left value properly, and how would I pass the animation to the next item dragged element. Thank you in advanced for your help and time

Here's a CodePen illustrating an issue that I've struggled with on and off again for a couple of years now. I'm not sure if these struggles are due to my misunderstanding, or if there is a problem with Draggable.js. This first demo is using the latest version of gsap and the beta version of draggable. I'll add a reply with a demo and analysis of version 3.0.2, which behaves differently. The menu pulls out from the left. (Could be a little more refined, but it works for this demo.) The shaded gray region at the right of the menu is a little grab bar that protrudes when the menu is closed. The button in the middle toggles allowNativeTouchScrolling for the draggable menu. For testing on Android and iOS you'll probably need to use the debug view of the codepen in order to fit everything properly. Here are my testing results (beta Draggable): Android: allowNativeTouchScrolling = false No scroll (expected). Drag works. Changing axis of drag motion to vertical during a drag event does not release drag. This is what I would expect. Android: allowNativeTouchScrolling = true Scroll works. Changing axis of scroll motion to horizontal during a scroll event does not release scroll. This is what I would expect. Can't drag menu. Draggable releases from touch after moving a very short distance. iOS: allowNativeTouchScrolling = false No scroll (expected) Drag works. Changing axis of drag motion to vertical during a drag event does not release drag. This is what I would expect. iOS: allowNativeTouchScrolling = true Scroll works. Changing axis of scroll motion to horizontal during a scroll event does not release scroll. This is what I would expect. Drag works. Changing axis of drag motion to vertical during a drag event does not release drag. This is what I would expect. Windows (Chrome, touch screen): allowNativeTouchScrolling = false No scroll (expected). Drag works. Changing axis of drag motion to vertical during a drag event does not release drag. This is what I would expect. Windows (Chrome, touch screen): allowNativeTouchScrolling = true Scroll works. Changing axis of scroll motion to horizontal during a scroll event does not release scroll. This is what I would expect. Can't drag menu. Draggable releases from touch after moving a very short distance.

Hello friends, I would like to know if there is a way to simulate the Drag on event using Draggable. I need to activate MouseWheel down to simulate drag to the left, and when activating MouseWheel up simulate the drag to the right.

Hello, we're working on a full-screen sliding interface and got in to a ruckus when trying to show it in IE11. It seems to be only to drag back the amount of padding instead of whole width of the content. Is this a Draggable issue or is there a way to fix it with css? Thanks in advance

I need to be able to get the position of the box or a way to know where the box moved and update the state. onDragEnd I can't pass the this.x for some reason, not sure if I'm missing anything. Here is the Demo: https://codesandbox.io/s/stoic-wood-zuyel?file=/src/Box.jsx

Hi I have a draggable with a iframe, in mobile, i can't move if my first touch is in the iframe. The scrolltop is good, the touch on desktop too, but on mobile nothing. So i can't use Draggable if i have a video(youtube/video) inside, on mobile. If i hijack with dragClickables:true, all my links and the play button in the iframe become unavailable. Anyone have a solution ? Thanks

OK - Whew! This was a great challenge for me. I learned a lot and I think it is worth sharing. I was initially inspired by the post about creating a sortable list. It reminded me of this classic tile puzzle that I am sure most of you have seen. Of course, the idea is to put all of the tiles in order. I certainly had a few challenges... Preventing the tiles from overlapping. Obviously, in the real puzzle you don't get to leap frog other tiles. I didn't truly accomplish this but have an acceptable workaround. Limiting drags to a single tile space at a time. I ended up utilizing the endDrag() to interrupt the dragging after a single snap which is a tile space value. Getting the "blank space" to move appropriately based on the tile that is being moved. My personal goal was to keep the code as minimal as possible. I reviewed many of the code pens related to dragging and boundaries and boy, were they complicated. I am very proud to say that I kept this all working in under 30 lines of JavaScript! I call this Phase 1 because my next step will be to track the tiles in such a way that we can launch an animation for the winner. In the meantime, enjoy this tile puzzle.

I'm trying to use Draggable with React and I don't seem to make it work. Currently I have this code and the version of react: "dependencies": { "gsap": "^3.5.1", "react": "^16.8.1", "react-dom": "^16.8.1", "react-gsap": "^2.2.1", } Update: Here is the link to code: https://codesandbox.io/s/gallant-morning-2ggfm

Hello. I need your help. I don't know gsap well yet. But I need to create an animation, and I don’t know how to do it. This is the slider. Can you make it infinity? And also do it on a scroll, but not so as to turn the mouse wheel on the slide. Can smoothly wheel the slider, and when you stop turning, the slide that is more captured is the one that becomes active? I understand I probably want a lot. But I already don’t know what to do. Help me please. Thanks to everyone who will respond. Perhaps there are other options for how you can do this. I will be glad for any help Here is an example site and I want to repeat this slider https://damiankujawa.pl/en

Hoping this is a quick fix. I've looked over the forums and implemented (allowNativeTouchScrolling: true) for GSAP's boilerplate slider, but it still interrupts the vertical scroll. I'd just like to glide over it, like any image, etc. Appreciate any help here: Thanks for all.

Hi everyone, I'd like to just start off by saying this GSAP is fantastic and this forum is a wealth of knowledge for an extremely noob "programmer" (I use that term very lightly lol) like myself! I'm trying to have a dragable div, which will auto create a MotionPathHelper onclick of a button. You can see in the pen that after dragging and when the path is created, it seems to add on the distance I've moved the element, previous to creating the path. Is there a simple way to avoid that happening? Forgive me if it's obvious as I'm very new to programming.