Search the Community
Showing results for tags 'draggable'.
Found 603 results
-
Hi guys, I can't seem to find a way to get the rotation value of a draggable tween which is placed on a timeline and then calling the seek() function to some mid-point on the timeline. I've created a simple code pen as an example: http://codepen.io/anon/pen/ijgDd - as you can see, the "alert" at the end of the script returns a value of 0 despite the fact that the tween is rotated. Any suggestion? Thanks ! Elior
-
Hi All, A rather strange situation: several tweens of the same object are added to a timeline to be played in a cubic bezier format. This objects is then dragged via Draggable. Then, in the 'onDragEnd' event the timeline to which the object had been added to is played starting from 0. I set a breakpoint after calling the play() function, and then make a call to TweenMax.getAllTweens(). The first time the object is dragged I see all the tweens that should have been on the timeline. However, after the 'onDragEnd' function ends, the browser steps into the code inside Draggable.min.js which continues on, and then if I make another call to TweenMax.getAllTweens() (while still in Draggable.min.js) then the tweens that were dragged no longer exist. What is no less odd is that if I drag the object again, play() is called again and works as if the tweens had not been removed, yet still TweenMax.getAllTweens() returns a list without the instances that had been dragged... Despite the fact that the removal of the tween happend inside Draggable.min.js, if I remove the call to the play() function from the 'onDragEnd' event handler, no tweens are removed... any clues?... Thanks ! Elior
-
Hello! I'm loving the new draggable component - works great. I have a full-bleed infinite wall that is draggable with no bounds. I see that dragResistance effects how much the content will move in respect to your mouse movement, and by setting it to zero the content will move the content the same distance as your mouse delta. This is as expected, but what I'm looking for is how to keep it the draggable content move a distance 1:1 (dragResistance:0), but have the content follow the mouse slightly behind to give it a slightly softer responsiveness. How can this be achieved?
-
Hey all, Browser : Chrome, OS : Windows 7 x64 codePen : http://codepen.io/Stefdv/pen/eybkF The problem(s); When i switch between sliders, the sliders don't always correspond to the current tranform of the box. There is als a 'jump' when i switch between slider adjustments. another issue: i can't seem to make a rotationZ for 180deg...at least it's not rotating right then ? Any help would be appreciated ( a lot )
-
I'm making a 360° slider, or actually its more like a 160° slider: http://codepen.io/robbue/pen/3012fd643e4724963c00cde7975f09a9 It's supposed to animate back to head-on-image on dragend (hammer.js is used for gestures), not only snap. How could I fix this? I would like some feedback to make it better because it isn't 100% smooth, and is this something Draggable & ThrowPropsPlugin could be used to, if so, how? Would be cool to have it draggable freely around with bounds limit. Why dont I use a plugin like 360slider? Where is the fun in that? On a more serious note - I may be falling back to a plugin (do you know of any good ones?), but it would be nice to use the power of GSAP to make it. Why seperate images and not a sprite? Because the final code will have a lot more frames and mobile devices doesn't support to big images.
-
Is there a way that I have a draggable object inside another draggable object. I am developing a mobile app and want to have a slider within a slider.
-
I am trying to use Draggable to rotate a <g> inside some inline SVG. <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.6/TweenMax.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.6/plugins/CSSPlugin.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.6/utils/Draggable.min.js"></script> ... TweenLite.set(".group1", {transformOrigin:"50% 50%"}) Draggable.create(".group1", {type: "rotation", throwProps: true }); This will allow the element to be rotated by dragging, but none of the momentum works and the rotation is incorrect in that the movement shifts from clockwise to counter clockwise mid-drag.
-
When trying to access "this" inside my onDragEnd callback, the FireFox 28.0 debugger is showing "this" as an instance of "Window" instead of an instance of "Draggable" as stated in the Draggable docs. Here's my simple codepen: http://codepen.io/anon/pen/dKEki ... and the FireFox debugger display at a breakpoint inside the callback.
-
Hi, I am building a page that builds multiple 'scenes' horizontally in the content area. Only one scene is visible in the area at a time. Users can drag the scene container to get to other scenes. I've done this using Draggable. For the most part, it has worked great. However, some scenes have a large video in them. When running on the iPad (chrome and safari), if the user touches the video and attempts to drag the container in order to move to the next scene, it does not drag. I've tried adding data-clickable="false" to the video tag but it still doesn't work. This all works on the desktop as far as I've tested it. Here is a code pen sample of what I'm talking about. You can drag the grey container box, but if you try to drag over the video, the container won't move. http://codepen.io/anon/pen/yohqG I'm using iOS 7.1, but the same thing happens in an older version as well.
-
Hi guys, I am working on a drag and sort thing with draggable and i have an issue that i can't find a way around it. Actually it looks like a bug. Items are in an unordered list so they are all identical in terms of child elements and class names. Draggable seems to work find with a class selector. Here's a code pen with just a simple setup. There is no drag trigger. http://codepen.io/ap-o/full/CEHBo But, once i pass a trigger selector everything goes wrong. Try to drag the little black box. http://codepen.io/ap-o/full/qfKtm Thanks in advance for your time *Apo
-
Hi there, In the demo for Draggable you show livesnap snapping to a grid. I wondered if it was possible to have an array of x and y values and cause the dragged item to snap to the closest one when near? The livesnap appears to only work with either a range of x values or y values, not specific points in a container. Also I'd like to be able to drag until I get close to a location and then it snaps. In the flash days I used pythagarus to work out the distance. I tried doing that in the ondrag function like below but it doesn't want to snap despite it getting the console log. Any guidance would be much appreciated. Thanks! onDrag:function(e) { for(var i=0; i<targetLocations.length;i++){ var xDistanceFromPoint = Math.abs(this.x - targetLocations[i].x); var yDistanceFromPoint = Math.abs(this.y - targetLocations[i].y); var distanceFromPoint = Math.sqrt((xDistanceFromPoint*xDistanceFromPoint)+(yDistanceFromPoint*yDistanceFromPoint)); if(distanceFromPoint < 50){ console.log("snapped"); this.y = targetLocations[i].y; this.x = targetLocations[i].x; } } }
-
howdy GSAP team! Just wanted to post a recently launched project using GSAP, specifically draggable and ThrowPropsPlugin. This is designed for mobile phones only so please check it out on your phone to get the full experience. http://www.crocs.com/spring thanks to Jack, Carl, and the whole GSAP community - always helpful and friendly! And thanks in advance for taking it for a spin Azuki
-
I'm trying to build a site that has a few requirements which include dragging 'cards' vertically and also scrolling them horizontally. Please see here: http://codepen.io/markmacumber/pen/Dlmzn The demo works by adding cards to a bottom aligned panel, that gradually push them out of screen to the right (this site will work on mobile and desktop browsers), I had to use css tables to get it to work with bottom alignment since my width/height variables are very random (since it will be seen on mobile devices of all shapes and sizes) and I cannot hard code div positions using absolute values. As you can see from the demo, this mostly works. I just need to be able to enable horizontal scrolling when the elements get too far outside the viewport. As you can see by the demo, I have tried to create a draggable element, but it screws up the layout... scroller = new Draggable(".cardCollection", { type: "scrollLeft", edgeResistance: 0.75 }); Can anyone please help me get this to work? I simpy want to be able to freely scroll the cards horizontally without sacrificing the layout. Perhaps I have fundamentally setup the page wrong? Thanks for any help you can give
-
Hi, I will be creating a mobile project where there would be a dial (think knob) and I want the user to spin the dial – as shown here: http://greensock.com/js/demo/throwprops/ But I need the spinning of the dial to activate another element on the page, such as moving a slider of images like next/prev buttons do. So, as the user spins the dial, an image would move across the page. Once the dial reaches a certain increment another image would move across, etc. Is this possible to do using Draggable plugin? Thanks
-
Hey Guys, As always this library is awesomazing. I am working with a draggable instance and I want to set an element inside to fixed. I have no problem adding a class to the container on the appropriate position. The problem is, that fixed element still sits inside the draggable instance due to the relative positioning of it. Any way around this? Thanks!
-
Hello, I'm trying to set up an instance of draggable that would allow other inputs to control the dragging (like arrow keys or scroll wheel). Is this possible? Please note that I do not just want to tween to new positions. I'd like to ensure that the draggable object's position is updated. Thanks!
-
Trying to create a draggable snap to pages on a site: sample codepen found here: http://codepen.io/cmmize1/pen/gltzw - no ScrollToPlugin and here: http://www.pradev.com/one-page/sample.html - with ScrollToPlugin On the Draggable.create - using a type: 'scroll' or a type:'x,y' - I am having problems getting the proper snap behavior on the x axis (dragging left - see page two of the sample). Any help figuring out the dynamics of the snap values to behave proper for this type of site would be greatly appreciated. The Y scrolling snap work great. Another thing I noticed changing the Draggable.create to a type: 'x,y' - The return values for jquerys .position varies on the pages. Shows up in the function scrollTo console.log. I'm pretty sure it has to do with the wrapper div that gets created with Draggable.create - type:'x,y'? I have commented out the code for the Draggable.create - type:'x,y' so as to test both types. Thanks for any help, Chuck
-
Hello, I've been fiddling with the greensock platform and plugins for a while and I'm impressed! Both - with the capabilities and the performance. I'm building a prototype of a fullscreen 2-way scroll system. A full window master - that scrolls and snaps horizontally. And with vertically scrolling elements inside. The goal is to get native scrolling full pages swipable up'n'down and side-to-side with snapping. Here's what i need help with: http://codepen.io/skorpa/pen/mvDfz Worked so far as intended - The vertical scroll cancels the parent horizontal scroll on onDragStart by passing endDrag to it, and vice versa, but only works with a mouse. With touch devices you can only control horizontal scroll. disable & enable doesent handle with touch eather and can leave elements frozen offset mid animation. Is there a way to implement this? Compromise is to use non native x, y scrolling and use keyboard or clickable buttons to move left-right I'm guessing.. And on a side note: Any good ideas how to implement horizontal snapping with native mouse / trackpad scrolling? Thinking - animate to the nearest snap point after a scroll event is fired Thanks in advance! Mikk
-
hi, first of all, thanks for the new draggable stuff, really awesome! i think, there's a strange behaviour when using the draggable plugin on mobile devices: i build a draggable div with hyperlinks inside. dragging works as expected while the links inside the draggable div don't work anymore. on desktop browser everything works fine. seems if there is a problem with the touch events in the draggable.js. here's the demo... http://dev.tm74.de/dragtest/ any idea? thx michael
-
I've been playing around with the new hitTest functionality this morning, and I have to say it's pretty fantastic and elegant, which is ideal. I'm wondering, though, if this same functionality can be extended to TweenMax to work with any GreenSock functionality and not just draggable. What I'm wanting to do is move elements around with the keyboard (or really any event) and be able to simply detect whether two or more elements are overlapping without that element having Draggable invoked on it. I've currently been writing my own collision detection engine to accomplish this, but being able to do it with a simple hitTest check would be far, far preferable, particularly as it would be elegantly integrated with GreenSock. As a simple example of one thing I'm doing right now: I invoke an animation which uses 3D transforms to move an element, and when that occurs I'd like to be able to do a simple check to know if during that animation the element collides with another, and allows me to then invoke another function at that point (such as stopping the animation). It would also be great if it could detect specifically which side of an element it collides with (left, top, right, bottom).
-
Hey GSAP team, I'm using the ThrowPropsPlugin and Draggable feature for a spinning dial of sorts. My dial will lock at 25.71 degrees (dividing a circle into 14 equal sections). I'd like to create a button that randomly spins the dial and stops at one of the defined sections. Has anyone created this kind of functionality or does anyone have any insight on how I might approach this? Also, in the GSAP dial example, the rotating image is a single "knob.png". My dial will have 14 different colors and I'd like each color to link to a new page. I realize this makes the dial a great deal more complex so I wanted to reach out for any suggestions on executing this elegantly. Thoughts? As always, thanks for any insight! azuki
-
Hi, Apparently select elements are ignored in a Draggable object, they are not triggered at all. In the 0.9.0 version of Draggable.js, input fields are now working properly ; so I just added "select" to the _clickableTagExp property (the "check list" allowing a tags, input, button, etc. to be triggered). However it does not seem to be enough. The select element is being triggered, but the dragging sort of sticks to the mouse. Any idea on how to solve this? (Or are you already on it...)
-
I am trying to make an interactive map with the draggable plugin that zooms in and out. I have made my image an SVG so it can scale well, and my location dots are css. But i have been running into two issues. 1. Since my map is longer than the view port, i can't seem to see the bottom of the map. it keeps scrolling back to the middle if i drag upwards. 2. All the zooming solutions I have found have only been for images. I need to zoom all the elements in the entire div. I started to create my own zoom, which zooms the whole div and the elements in side it. But this presents a couple of issues. First, it zooms in and out at the same spot, I would like it to zoom into the current mouse location. And second if I zoom out at the edge, the div goes out of the visible boundaries so i can't drag it around. As per your requests I created a codepen, http://codepen.io/jermbo/full/LktfB , and I realize this is a very specific situation. Any direction would be greatly appreciated. I just need a push in the right direction and I got the rest of the map functionality. Thanks in advance!! *Plugin Request : Zoomable. If this were a greensock plugin like Draggable I would be the happiest developer in the world!
-
This is just a math question that I'm struggling to answer... I'm using the Draggable with type: 'rotation'. And I want it to "snap" to degrees I'm providing via an array. The example snap code looks like this: var rotationSnap = 90; snap:function(endValue) { return Math.round(endValue / rotationSnap) * rotationSnap; } Since my "rotationSnap" variable could be any number between 0-360, how can I calculate the return value to always be between 0 and 360?,Specifically when the endValue is negative or higher than 360. Example Issue: Let's say my array contains the values 0, 90, 180, and 270. The problem is that a negative endValue always returns 0 from my array. And an endValue higher than 360 always returns 270 from my array. Extra Info: I have a function that compares endValue to my array and returns the closest number. Thanks for any info and please let me know if I need to clarify.
-
Hi guys, I was running a little test site in v11 and it was working fine except Draggable wasn't supporting IE11 touch events. No worries, I knew that. So then v12 came out, and I grabbed it and overwrote my .js files - but there's no ThrowPropsPlugin in the v12 package. I tried using the old one from v11 and got some unexpected behaviour - Draggable only fires on every second click or touch.
