Search the Community
Showing results for tags 'draggable'.
-
onDragEnd() is setting defined x position but without transition.
Ayaf Noneym posted a topic in GSAP
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 -
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
-
draggable Draggable does not trigger OnDrag and Snap in React.
Thomas Devolder posted a topic in GSAP
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; } }) } -
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!
-
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.
-
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
-
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.
-
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
-
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 ?
-
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.
-
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 ?
-
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.
-
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'. -
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!
-
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
