Search the Community

Example : http://codepen.io/anon/pen/dnuCJ?editors=001 Premise : We have a draggable grid that may be larger than the user's current viewport. When they start to drag, we are scaling the draggable area to fit in their viewport, and scaling back out when they are done. The Problem : Greensock draggable watches deltas in the pointer X / Y position to determine dragging. This means that... 1) On the initial scale the pointer becomes detached from the draggable element. 2) Pointer x/y deltas do not account for the scaled content, so it ends up feeling like there is a drag resistance when there is not. The more the content is scaled, the more exaggerated this becomes. Desired Outcome : 1) As the content scales, the x,y position of the draggable element is changed so that it remains underneath the pointer. 2) Pointer deltas are divided by scale so that there is no feeling of drag resistance. I've been exploring this but cannot come up with a good comprehensive solution, especially for the first problem. For the second point, I am actually able to set a negative dragResistance dragResistance = 1 - 1/scale but it feels awkward when the pointer is detached from the draggable element. Any sugestions are welcome! Thanks, Erin

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

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

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!

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'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

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

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

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

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!

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?

First thanks to Jamie and Jack for answering a similar question. Turns out I was asking the wrong question What I'm failing to achieve is something very similar to the Draggable Spin demo... http://www.greensock.com/draggable My requirement has two differences: I need to snap to a bunch of degrees from an array that are not in even increments. For example [0, 88, 185, 268]. I need a callback so I can display information related to the "snapped" degree. You can think of this as the Wheel of Fortune with uneven distances between each pin. A few things to note: I tried supplying an array to the snap option, but once the dial turns more than one rotation, it comes whipping back like it's attached to a rubber band. In addition, I can't use a callback with this technique (I don't think). But the GreenSock Spin demo allows you to spin the dial around and around, and it smoothly lands on a "snap" degree. Thanks for any help!

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, I’m having weird behavior with mouseover and mouseout events being triggered only sporadically on elements inside a Draggable. I actually want them to fire, but It seems they don’t at all until I used the draggable a first time, and then it works, but then with more subsequent dragging sometimes it works, sometimes not. Any idea?

Hello today I installed the new version of draggable (VERSION: 0.9.8) and (some) of my draggables jump about 250 pixel to the right when they are selected. Going back to version 0.9.6 they behave like I expect and as they should. What changed from 0.9.6 to 0.9.8 so that I can adapt my code? Thank you

Hello, I am very new to your api/code but definitely love it! Conceptually what is the best create a draggable div that snaps to a grid and can detect when it shares a cell with another div. Should I write validation a function in onThrowComplete (using the ThrowPropsPlugin)? Just looking for a little guidance.

Hi all, I was wondering if there is a way to move a draggable by clicking another element? I've created a horizontal slider similar to the jQuery Mobile Slider. There are several "snaps" along the way. I would like to move the draggable to one of these "snaps" by clicking a button. The problem with simply tweening the draggable... When dragging, the draggable stays within the bounds (specifically when dragged all the way to the right). I suspect it is auto calculating a negative margin. However when I tween the draggable to the far right, it goes out of the bounds. I could implement my own negative margin calculation but was hoping there was a built in way to do this. Thanks for any help!

Hello, I am creating a barometer that has an interactive needle for the user to adjust. I used the draggable type rotation to set it to spin, however when I tried putting in the bounds, (bounds:{minRotation:0, maxRotation:90}), it is not recognizing the bounds at all. Also, when I have tried to get the info on where the needle's last rotation degree lands (onDragEnd:function() { console.log(this.rotation);}), the console logs it as undefined. Any clues why this is not being applied? Thanks, ErinD function init() { console.log("yeash!!!!"); needleImg= document.getElementById("bNeedle"); barometerImg=document.getElementById("barometer"); smallForm=document.getElementById("groupThis"); //console.log(needleImg); TweenMax.to(needleImg, 3, {css:{rotation:145, transformOrigin:"193px 47px"},ease:Elastic.easeOut}); Draggable.create(needleImg, { type:"rotation", throwProps:true, onDragEnd:function() { console.log(this.rotation);}, bounds:{minRotation:0, maxRotation:90} }); }

Alright, I have problems with interactivity. In an attempt to rectify that I am trying out draggable. I have been unable to find a starting from scratch tutorial so, I just read a lot of notes on it and got it to kind of work. I think there might be a problem with my layout, but since I just kind of jumped in I am not sure how to set up my markup to work with this. A brief description of my project; I am building interactive maps. They have multiple floors meaning multiple layers. The navigation has to stay put, but I want to be able to zoom in and drag the map around to scroll it. It has to remain in my #canvas and get clipped if it exceeds those bounds. My problems; after I zoom in it drags to show the hidden portions of the map, but then snaps back to center. After I drag the map, it changes the z-index of the draggable #images to 1001, and every drag after increases that number by 1. My markup: #canvas { position: absolute; background-color: black; width: 1080px; height: 1080px; overflow: hidden; } .mapLayer { width: 1080px; height: 1080px; position: absolute; overflow: hidden; } #images { overflow: hidden; position: absolute; top: 0px; left: 0px; width: 1080px; height: 1080px; z-index: 0; } #key { position: absolute; } #legend { position: absolute; top: 170px; left: 33px; } #buttons { position: absolute; top: 830px; left: 24px; width: 300px; z-index: 5; } .btn { position: relative; margin-top: -4px; } #chooseview { position: absolute; top: 800px; left: 24px; } #zoom { position: absolute; top: 40px; left: 40px; display: block; width: 50px; z-index: 5; } .zoom { width: 50px; height: 50px; } My code: window.onload = function() { var images = document.getElementById('images') var canvas = document.getElementById('canvas') var btn01 = document.getElementById('btn01'); var btn02 = document.getElementById('btn02'); var btn03 = document.getElementById('btn03'); var btn04 = document.getElementById('btn04'); var zin = document.getElementById('zin'); var zout = document.getElementById('zout'); var you = document.getElementById('you'); var fl01 = document.getElementById('fl01'); var fl02 = document.getElementById('fl02'); var fl03 = document.getElementById('fl03'); var fl04 = document.getElementById('fl04'); var st01 = document.getElementById('st01'); var st02 = document.getElementById('st02'); var animateFl01 = new revealFl01(); var animateFl02 = new revealFl02(); var animateFl03 = new revealFl03(); var animateFl04 = new revealFl04(); var animateZin = new ZoomIn(); var animateZout = new ZoomOut(); //: This is to hide layers on start. TweenLite.to(you, 0, {opacity:1}); TweenLite.to(fl01, 0, {opacity:1}); TweenLite.to(fl02, 0, {opacity:1}); TweenLite.to(st01, 0, {opacity:1}); TweenLite.to(fl03, 0, {opacity:0}); TweenLite.to(fl04, 0, {opacity:0}); TweenLite.to(st02, 0, {opacity:0}); //: These are button functions to show and hide layers. function revealFl01() { this.tweenCount = 0; this.animate_Fl01 = function(){ TweenLite.to(you, 0.25, {opacity:1}); TweenLite.to(fl01, 0.25, {opacity:1}); TweenLite.to(fl02, 0.25, {opacity:1}); TweenLite.to(st01, 0.25, {opacity:1}); TweenLite.to(fl03, 0.25, {opacity:0}); TweenLite.to(fl04, 0.25, {opacity:0}); TweenLite.to(st02, 0.25, {opacity:0}); this.tweenCount++; }; } function animate_Fl01(event){ animateFl01.animate_Fl01(); } function revealFl02() { this.tweenCount = 0; this.animate_Fl02 = function(){ TweenLite.to(you, 0.25, {opacity:0}); TweenLite.to(fl01, 0.25, {opacity:0}); TweenLite.to(fl02, 0.25, {opacity:1}); TweenLite.to(st01, 0.25, {opacity:1}); TweenLite.to(fl03, 0.25, {opacity:0}); TweenLite.to(fl04, 0.25, {opacity:0}); TweenLite.to(st02, 0.25, {opacity:0}); this.tweenCount++; }; } function animate_Fl02(event){ animateFl02.animate_Fl02(); } function revealFl03() { this.tweenCount = 0; this.animate_Fl03 = function(){ TweenLite.to(you, 0.25, {opacity:0}); TweenLite.to(fl01, 0.25, {opacity:0}); TweenLite.to(fl02, 0.25, {opacity:0}); TweenLite.to(st01, 0.25, {opacity:0}); TweenLite.to(fl03, 0.25, {opacity:1}); TweenLite.to(fl04, 0.25, {opacity:1}); TweenLite.to(st02, 0.25, {opacity:1}); this.tweenCount++; }; } function animate_Fl03(event){ animateFl03.animate_Fl03(); } function revealFl04() { this.tweenCount = 0; this.animate_Fl04 = function(){ TweenLite.to(you, 0.25, {opacity:0}); TweenLite.to(fl01, 0.25, {opacity:0}); TweenLite.to(fl02, 0.25, {opacity:0}); TweenLite.to(st01, 0.25, {opacity:0}); TweenLite.to(fl03, 0.25, {opacity:0}); TweenLite.to(fl04, 0.25, {opacity:1}); TweenLite.to(st02, 0.25, {opacity:1}); this.tweenCount++; }; } function animate_Fl04(event){ animateFl04.animate_Fl04(); } function ZoomIn() { this.tweenCount = 0; this.animate_Zin = function(){ TweenLite.to(you, 0.25, {height:2000, width:2000, left:-540, top:-540}); TweenLite.to(fl01, 0.25, {height:2000, width:2000, left:-540, top:-540}); TweenLite.to(fl02, 0.25, {height:2000, width:2000, left:-540, top:-540}); TweenLite.to(st01, 0.25, {height:2000, width:2000, left:-540, top:-540}); TweenLite.to(fl03, 0.25, {height:2000, width:2000, left:-540, top:-540}); TweenLite.to(fl04, 0.25, {height:2000, width:2000, left:-540, top:-540}); TweenLite.to(st02, 0.25, {height:2000, width:2000, left:-540, top:-540}); this.tweenCount++; }; } function animate_Zin(event){ animateZin.animate_Zin(); } function ZoomOut() { this.tweenCount = 0; this.animate_Zout = function(){ TweenLite.to(you, 0.25, {height:1080, width:1080, left:0, top:0}); TweenLite.to(fl01, 0.25, {height:1080, width:1080, left:0, top:0}); TweenLite.to(fl02, 0.25, {height:1080, width:1080, left:0, top:0}); TweenLite.to(st01, 0.25, {height:1080, width:1080, left:0, top:0}); TweenLite.to(fl03, 0.25, {height:1080, width:1080, left:0, top:0}); TweenLite.to(fl04, 0.25, {height:1080, width:1080, left:0, top:0}); TweenLite.to(st02, 0.25, {height:1080, width:1080, left:0, top:0}); this.tweenCount++; }; } function animate_Zout(event){ animateZout.animate_Zout(); } btn01.onclick = animate_Fl01; btn02.onclick = animate_Fl02; btn03.onclick = animate_Fl03; btn04.onclick = animate_Fl04; zin.onclick = animate_Zin; zout.onclick = animate_Zout; Draggable.create(images, {type:"scroll", edgeResistance:0.85, bounds:(canvas)}); }; Unfortunately my images are proprietary so I can't put up a working version yet. If anyone has seen a tutorial about this, has ideas on how to scroll the clipped off part, or if anyone knows where I screwed this up please let me know.

Hi, I'm having high hopes of being able to replace other touch/scroll libraries such as iScroll or FTScroller (both being good projects but sorely lacking in certain areas) with the Draggable and ThrowProps plugins. So far, the only thing I'm missing from GSAP is the possibility to limit the snap to the closest item, thus being able to implement proper "paging". FTScroller has a "strict" property to achieve this behaviour and these examples give a good explanation of the difference: http://ftlabs.github.io/ftscroller/examples/horizontalpaged.html http://ftlabs.github.io/ftscroller/examples/horizontalpaged-strict.html Except from updating the bounds and snap values after each "page" switch, I can't seem to find a way to implement this behaviour using the current API. Any chances of an implementation of this type of functionality?

Hi, I'm absolutely loving your work... it's really making things so much simpler for me... However I've got an issue... I've got a group of panels that you can drag around... however one of them has text in it that can be scrolled, ... it works fine with the mouse wheel, but when you drag the text it both scrolls the text and the panel... is there a simple and correct way to stop propagation. I don't want to start to try and hack work arounds if possible as the GSAP stuff makes my code nice and clean... <script> #slide5 { position:absolute; left:500px; top:100px; width:450px; height:400px; background-color:#49F7FA; } #slideScrollText { position:absolute; width:300px; height:330px; left:130px; top:70px; overflow:auto; border:0px solid #ff0000; z-index:1000; color:#666666; font-size:13px; padding-right:20px; } </script> <div id='slide5' class='panel'><div id='slideScrollText'>Imageine lots of text here</div></div> <script> Draggable.create(".panel", {type:"x,y", throwProps:true, bounds:'#siteContainer' }); Draggable.create("#slideScrollText", {type:"scrollTop"}); </script>

Hello, Guys i have a Draggable implemented on a container with the "scrollLeft" feature. On a desktop computer, the container scrolls and the elements inside it are clickable. The thing is each element inside the container has a hover effect, and then when clicked, it gets expanded. I have come up with a problem on an Ipad. The draggable works great and all, but when i click on an element the hover effect takes place, after a research i found out that this is a safari feature by apple to let the hover effect show. I tries the suggested double tap and that did not work. I also tried the .no-touch approach and that did not work as well. For the sake of testing as well, i tries the data-clickable approach too but no,luck as well. when I removed the draggable the elements expanded as expected. Am i missing something? Please help. MOH

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.