Search the Community

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

Hey All, I'm pretty new to these tools, only been working with them for about a week and I'm VERY impressed -- Great work! I'm using the tools to assist me in building a mobile app and they are performing delightfully with phonegap on both iOS and Android devices. Kudos. I am wondering if there's an easy (or at least highly performant) way in which to cause a "Draggable" item (in my situation, basically a div/box on the screen) to change it's opacity/alpha based upon how far away it gets from the "bounds" it's located within? Basically, I want the user to be aware that moving the box a certain amount will dismiss it and remove it by fading the box out more and more as it moves away (and I'd want to fade it back in if it returns), but I haven't found a great way to do this yet. Any help/thoughts would be greatly appreciated -- Thank you! -Flinn

I am attempting to resize a draggable DOM. As in the user can select an edge of the DOM and drag it to a new size. Is this something that GSAP is designed to handle or am I on the wrong track? jQueryUI 'resizable' doesn't really work with a draggable (or I haven't yet been able to get it to work).

hi, i'm having a problem when using draggable and then scaling objects with css transforms: everything works fine so far, but the scaled div gets blurry after scaling. first i thought it's a browser problem, but when leaving draggable away, the rendering works as expected and the div's text looks sharp again, no matter what scaling factor is used. when using draggable, it seems to me, that the browser treats the scaled object as an image... maybe there's the possibility to force the browser to re-render? would be nice if there's any workaround ;-p thanks! michael

I have create a div like this: <div id="content" > <div id="textContent"> aaaaaaaaaaaaaa </div> </div> Draggable.create("#content", { type:"top,left", edgeResistance:0.5, bounds:window }); But I cant copy the words "aaaaaaaaaaaaaa". I have tried data-clickable="true". But I still cant set focus on the words. Plz help me . . BTW I have a simple solution.But cant use throwProps. <div id="textArea"> aaaaaaaa </div> <div id="content"> </div> Draggable.create("#content", { type:"top,left", edgeResistance:0.5, bounds:window, dragClickables:false, onDrag:function() { $( "#textArea").css({"top":this.y,"left":this.x}); } }); And sorry about my terrible English...

Hi everyone, its been a few days since I found out and started using gsap js and must admit its an awesome framework. I make native games for iOS and now I evaluate gsap for html 5 cross platform 2d game development. I have a strange performance issue regarding the Draggable utility on iOS devices (maybe on other platforms too but I have not tested any other device). When the user moves the draggable element around with his finger I observe high CPU usage (55-65% on an iPhone 3GS) while when the user is not interracting with the element the CPU usage is 25-35%. I downloaded an updated version of Draggable from here but there was no difference. I am at your disposal for further info and testing!

Hi, I am new to GreenSock and trying to use Draggable plug in of GreenSock. I have added the JS libraries in following order <script src="../../../js/jquery-1.10.1.min.js"></script> <script src="../../../js/jquery-ui.min.js"></script> <script src="../../../js/greensock/plugins/ThrowPropsPlugin.min.js"></script> <script src="../../../js/greensock/TweenMax.min.js"></script> <script src="../../../js/greensock/plugins/Draggable.min.js"></script> My HTML code structure is as follows: <div id="imageContainer"> <div class="galleryImg"></div> </div> I completely flush #imageContainer and add few elements, with class name galleryImg, to it dynamically. To make the imageContainer draggable I added following code in my JS Draggable.create("#imageContainer"); However, when I try to drag the element, an error is thrown and the element is not draggable. The error from FireBug is as follows: TypeError: i._gsTransform is undefined ...},this.content=o,this.element=t,this.enable()},H=function(i,n){t.call(this,i),i The error also occurs as soon as I click (mouseDownEvent) the imageContainer. Is there anything am I doing wrong over here ? Which JS files do I need to add to use Draggable? Where can I find standalone sample examples on how to use GreenSock plugins? (e.g. JQuery has this "View Source" link which can display full HTML to understand the whole example) Please guide.

Hi there, I consider using Draggable in my mobile game (either with or without throwprops), in a similar fashion to games like WordFeud: a draggable stage with draggable tiles on it. For this it seems most logical to have draggable objects inside a div that is itself draggable. This seems to work somewhat, though when I drag the tile, the draggable stage also moves (hence the tile itself moves twice the dragged distance). it seems easiest to cancel propagation of the event using the onDragStart callback, however it seems that no event object is passed into this callback so I cannot call e.stopPropagation(). Who has an elegant solution for nested draggables? By the way, I also tried temporarily .disable() on the top draggable but that gave serious javascript/dom errors. Here is my code so far. HTML: <div id="scrollContainer"> <div id="scroller" style="overflow: visible; padding: 0px; position: relative; height: 300px; width: 300px;"> <div id="tile0"> <img src="img/tile_0.png" style="position: absolute;top:0"> </div> </div> </div> And js: Draggable.create("#scroller", {type:"scroll", edgeResistance:0.5, throwProps:true}); Draggable.create("#tile0", {type:"x,y", edgeResistance:0.65, onDragStart: function(event){ //event not available here? }});

Hi, I'm not exactly a coder but would like to use greensock for interactive comic book animation. There was already one question here about comics, but that was about controling the timeline in scrolling. I would like to use divs for slides/pages and you should swipe horizontaly from one to the next. I would like to control the animation within each div when that div/slide/page is visible and stop the animation when you swipe to other page. There should be restart of animation every time you revisit the page. Can I use draggable for swipe animation between slides? Would love to see some easy example of this... Thanks!

I'm playing with Draggable and trying to use scrollTop as the type but it's not working. If I remove the type it works fine (or set it to any other type except scrollLeft). Any ideas? http://jsfiddle.net/Krcd6/4/

I've been working on an AV timeline scrubber. For the most part, it's working, except after a target element is dragged, then the animation stops and will not resume. It does call the seek appropriately with the correct value in seconds. If I kill the animation and restart it each time after a drag event, the coordinates of the scrubber knob get messed up and I cannot tell where the darn thing is at or where it should be. Plus it seems to make more sense that an animation not have to be recreated every time. What am I missing here? D var knob_offset = 4; Draggable.create("#pb-scrubber-knob", { bounds: $("#pb-scrubber-bounds"), type: "x", edgeResistance: 1, onDragStart: function() { var knob = Draggable.get("#pb-scrubber-knob"); knob.update(); }, onDrag: function() { $("#pb-scrubber-fill").width( $("#pb-scrubber-knob").position().left + knob_offset ); $("#pb-elapsed-time").text( window.odeshell.formatTrackTime( window.odeshell.getTrackPosition())); }, onDragEnd: function() { $("#pb-elapsed-time").text( window.odeshell.formatTrackTime( window.odeshell.getTrackPosition()) ); window.odeshell.seekScrub(); }, onUpdate: function() { $("#pb-scrubber-fill").width( $("#pb-scrubber-knob").position().left + knob_offset ); }, }); window.odeshell.startScrub = function() { var dur = window.odeshell.getScreenDuration(); var animate_to = $("#pb-scrubber-bounds").width()-knob_offset; $("#pb-elapsed-time").text(window.odeshell.formatTrackTime(0)); if ( window.odeshell.tlScrubberKnob !== undefined ) { window.odeshell.restartScrub(); } else { window.odeshell.tlScrubberKnob = new TweenLite( "#pb-scrubber-knob", (dur/1000), { left:animate_to, immediateRender: true, ease:Linear.easeNone, onUpdate: function() { var sndpos = window.odeshell.getTrackPosition(); var dur = window.odeshell.getScreenDuration(); var kpos = $("#pb-scrubber-knob").position().left; var bounds = $('#pb-scrubber-bounds').width()- ($("#pb-scrubber-knob").width() + 8); $("#pb-elapsed-time").text( window.odeshell.formatTrackTime(sndpos)); $("#pb-scrubber-fill").width(kpos); if ( window.odeshell.playComplete() && (kpos >= bounds) ) { window.odeshell.stopScrub(); } } }); } }; window.odeshell.restartScrub = function() { if ( window.odeshell.tlScrubberKnob !== undefined ) { window.odeshell.tlScrubberKnob.restart(false, false); } }; window.odeshell.seekScrub = function() { if ( window.odeshell.tlScrubberKnob === undefined ) { return; } var kpos = $('#pb-scrubber-knob').position().left; var dur = window.odeshell.getScreenDuration(); var animate_to = $("#pb-scrubber-bounds").width()-knob_offset; var prct = kpos/animate_to; var sndpos = dur * prct; if ( sndpos < 0) { sndpos = 0; } if ( sndpos >= dur) { sndpos = dur; } var seekpos = Math.round(sndpos/1000); $("#pb-elapsed-time").text(window.odeshell.formatTrackTime(sndpos)); window.odeshell.setTrackPosition(sndpos); window.odeshell.tlScrubberKnob.seek(seekpos); if ( !window.odeshell.tlScrubberKnob.paused() ) { window.odeshell.tlScrubberKnob.play(seekpos); } }; window.odeshell.resumeScrub = function() { if ( window.odeshell.tlScrubberKnob !== undefined ) { window.odeshell.tlScrubberKnob.resume(); } }; window.odeshell.pauseScrub = function() { if ( window.odeshell.tlScrubberKnob !== undefined ) { window.odeshell.tlScrubberKnob.pause(); } }; window.odeshell.stopScrub = function() { if ( window.odeshell.tlScrubberKnob !== undefined ) { window.odeshell.tlScrubberKnob.pause(); } };

Hey guys! I'm trying to make my Kinetic Layer draggable with the draggable plugin but I'm not quite sure if I'm doing it right. Maybe you guys can help me out a little. This is what I have so far: viewPort = new Kinetic.Stage({ container: 'container', width: window.innerWidth, height: window.innerHeight }); mapLayer = new Kinetic.Layer(); Draggable.create(mapLayer, {type:"x,y", edgeResistance:0.65, throwProps:true}); mapLayer.add(...); // adding map tiles to the layer viewPort.add(mapLayer); but I'm always getting: "Uncaught TypeError: Cannot set property 'onselectstart' of null --- Draggable.min.js:14". I have a feeling that I'm doing something terribly wrong here ... greetings Skripted

Hello! Has anyone noticed when using Draggable with throwProps:true, with restricted bounds AND with snap that if throwing the object and try to catch it before it reaches its destination it directly jumps to calculating end position. It should just freeze the object when the user click on it when it still in motion. Like when you are not using the snap. Im creating a webapp with a navigation that I can throw Like the facebook app. Try with the examples http://www.greensock.com/draggable/ the first one "Throw" with the setting "Snap to grid" checked. You will see what happens. Any thoughts or solution? Thanks //Robert

Hello, Is there a way to invert the behavior of the bounds management. Having a box with bigger size than the container, that could be draggable but must fill the container. Best, Nico J.

The next update to Draggable introduces some useful new properties: pointerX pointerY endX endY The "pointer" properties refer to the mouse (or touch) location from the last event (like event.pageX) associated with that Draggable instance. The "end" properties refer to where the element will land. Those get populated as soon as the user releases the mouse (or touch). Draggable also has the following properties (which aren't new): x y xMax xMin yMax yMin Here's the dilemma: technically there's an inconsistency with the way the new names are structured compared to the existing properties - "x" and "y" are at the end instead of the beginning ("endX" vs. "xMax"). Matching the current naming structure seems awkward ("xPointer" and "yPointer" don't seem nearly as intuitive as "pointerX" and "pointerY"). I don't like having inconsistencies, though. Should we change the max/min names so that the "x" and "y" are at the end? The only awkward one is "maxX" because there are two x's at the end. So it'd mean changing them to "maxX", "minX", "maxY", and "minY". Or we could leave the old/existing properties the same and live with the inconsistency. The nice thing about this is it wouldn't break any existing code that users have written. However, since Draggable is so new, this isn't as big of an issue - if we're going to make a change to the API, it's much better to do it now before more people start using it. What are your thoughts? We need to make this decision quickly, as the goal is to release the Draggable update by tomorrow. Your input is greatly appreciated. (by the way, the upcoming new features are mentioned in this thread: http://forums.greensock.com/topic/8056-draggable-invert-bounds-behavior/#entry31763)

Hello i'm working with Draggable and the ThrowPropsPlugin - they are fantastic! However I have a problem. How can I get the final x, y position of the dragged object? When dragEnd is outside the boundery, ThrowProps will move the object back inside the boundery (very nice!) but where does it stopp? I'm working on a kind of mouse-follower, where one object follows the draggable one.

I am using draggable on a div containing svg elements If I dont use draggable and scale the div via:- var i = $('#chart'); TweenLite.to(i, 2, {scale:4}); The edges of the SVG text and circle etc remain crisp as you would expect from scaled vectors. However if I enable draggable via:- var aD = Draggable.create("#chart", {type:"x,y", edgeResistance:0.5, throwProps:true, bounds:window}); and then zoom the SVG element become fuzzy as though they were scaled pixels. This happens even if I disable draggable before scaling Any ideas why this might be? Thanks - Dean Update: Scale without Draggable uses -webkit-transform: matrix(... Scale with Draggable uses -webkit-transform: matrix3d(... using Safari and Chrome on Mac - not a problem on Firefox (not using webkit) Ah: Putting force3D:false as in: TweenLite.to(i, 2, {scaleX:4, scaleY:4, scaleZ:1, force3D:false}); Is their a reason for the problem with matrix3d and scale on webkit? solves the problem

Is it possible to use the Draggable util class with Canvas, specifically EaselJS? I'm creating a dial that can you can spin using throwprops. I wasnt able to use Draggable so I've recycled the dial AS3 example from here http://www.greensock.com/throwprops/ It works ok, but its a bit glitchy compared with the Draggable CSS example. I've created a Fiddle with the two versions, http://plnkr.co/edit/eKVhZL5ulUWqj5pgP9BA?p=preview Is the something wrong with the math on my Canvas version perhaps? Any tips would be appreciated.