Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'draggable'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







  1. My son needed a way to record the data his weather station collected. This is the start of the interface I wrote for him. http://codepen.io/dotComb/pen/Gqdydw Hope this helps someone! -Dan
  2. Hey everyone. First time writing on here. I have this pen http://codepen.io/mattl/pen/YWjzkP I'm trying to add multiple elements to a bounds using draggable and throwprops. The problem i'm having is that I don't want these elements to overlap, in fact I want them to bounce off each other when they hit, so that a certain amount of elements would fill up the containing bounds. Any information on this would be greatly appreciated. Been hunting around for a while on this. Thanks, Matt.
  3. Is there a way to reverse (invert) the direction of a Draggable instance? Thanks.
  4. Draggable.create("#myDIV", { type:"x", zIndexBoost:false, throwProps:false, onDragEnd:function() { TweenMax.to($("#myDIV"), 5,{css:{left: 0}}); console.log('DRAG END'); }, }); TweenMax.to($("#myDIV"), 5,{css:{left: 0}}); I wanted this to trigger every time drag ends, but this only animates only once and is not accurately goes to its original position
  5. Hi everyone, I use TweenMax and Draggable (GSAP 1.15.0) with RequireJS for a project. My require config is : require.config({ paths: { TweenMax: '../../local/js-vendor/gsap/src/uncompressed/TweenMax', Draggable: '../../local/js-vendor/gsap/src/uncompressed/utils/Draggable', }, shim: { Draggable: { deps: ['TweenMax'] } } }); It works like expected. But i have problem during the minification step with the r.js tool. The compiler looks for the TweenLite file, but doesn't find it. I have found in this thread http://greensock.com/forums/topic/7213-using-timelinelite-and-tweenlite-with-requirejs/ that I can set the paths like this : require.config({ paths: { TweenMax: '../../local/js-vendor/gsap/src/uncompressed/TweenMax', Draggable: '../../local/js-vendor/gsap/src/uncompressed/utils/Draggable', TweenLite: 'TweenMax' } }); But now the error is that the TweenMax file is not found. If I do directly require.config({ paths: { TweenMax: '../../local/js-vendor/gsap/src/uncompressed/TweenMax', Draggable: '../../local/js-vendor/gsap/src/uncompressed/utils/Draggable', TweenLite: '../../local/js-vendor/gsap/src/uncompressed/TweenLite' } }); it works as expected. But TweenLite is packaged two times (inside TweenMax + TweenLite directly) A workaround is exclude TweenLite with the compiler options. requirejs: { compile: { options: { paths:{ 'TweenLite':'empty:' } } } } I don’t know if there is a better way to fix the problem, but for the moment it works for me. Hope it helps. And I’m all ears if someone has a best solution.
  6. Posted a bug report on Github, linking it here too. https://github.com/greensock/GreenSock-JS/issues/154
  7. Draggable has a hitTest that you can declare percent overlap, but I'm wonder if there's a way to see how much of a percent is overlapping? this.hitTest("#ele", "10%") BUT is it possible to get "this" elements percent overlapping the hitTest ele?
  8. hello folks first post. and first of all – thank you for the nice work so far. i'm really glad to use all of your stuff. i want to create a fullpage.js like slider based on gsap. i used a couple of resources to build a prototype. the problem: it’s hard to get slides and sections in a loop. it works for vertical navigation, but i have no idea for the horizontal navigation. would be great to get some hints or even modifications / better solutions. best regards jakob
  9. Hi, I was prototyping a website where that with a look similar to a paper advertise that has these tearable stripes with some contact info: (eg: http://www.printwand.com/blog/media/2012/01/tear-off-sheets-300x296.jpg). I was working on the effect of tearing these stripes, using GSAP and the Draggable plugin. The approach I´m following is to: Have two elements: stripe and stripe-maskThe stripe-mask object will be an invisible overlay container, absolute positioned over the stripe object. This will be target of the Draggable object (so you drag and drop the stripe-mask object) stripe will be visible and animated based on the properties of the stripe-mask object (drag progress over an axis) When you drag and move the stripe-mask object, the onDrag callback updates the animation that moves the stripe object, by setting its progress (calculated based on 'the lenght' of the drag movement done so) When you release the stripe-mask object, the onDragEnd callback disables the Dragable object, reset the position of the stripe-mask by using TweenLite.set() and then reverses the animation of the stripe object by calling TimelineLite.reverse() The onReverseComplete callback then is called, and it just enables back the Draggable object so the user can drag it again The problem I'm facing, is that the onReverseComplete callback is being called when it shouldn't after you drag and drop for the the first time. I can´t see why is this happening. My thoughts go with the Timeline object having some sort of flag that tells the engine the object has been reversed, and is not updated by calling progress(). Here is a pen that illustrates the issue. Look at the logs of 'enableStripe' being printed many times when you drag and drop a second time. Thanks for your help, and keep up the good work! H
  10. Hello, I'm running into inconsistent behavior with Draggable. I have images wrapped in links that I want to be able to drag AND click on. In other words, clicking and releasing without movement should open the link, clicking and moving should drag the element. I set dragClickables to true, which creates the desired behavior in all the major desktop browsers that I tried—Chrome, Safari and Firefox on OS X 10.9.5, and IE10 on Windows 7. However, dragClickables:true breaks the links on iOS 8 and 9. I can drag, but I cannot click to open the link. I looked in the console and I don't see any errors. See the codepen for an example. Any ideas on how to resolve this would be appreciated. Thanks, Scott
  11. Hi, Is it possible to make an element that has a transform origin set to 'top left' rotate (using Draggable rotate) around the element's center, as if the transform origin was originally set to 50% 50%? I was thinking perhaps to temporarily changes the transform origin yet keeps the element in the same position in the onDragStart event and in the onDragEnd event to restore the 'top left' origin, is that possible? Thanks, Elior
  12. Hi, I'm using scrollTop on a div and would like the native scroll bar to show on mobile. It does on the desktop and Chrome on Android 4.1.2 but doesn't on iOS 7.1.1 on iPhone 4S in either Safari or Chrome. I have set -webkit-overflow-scrolling:touch in the css but it's not helping. Any ideas? Thanks
  13. Is there a way to force draggable plugin into using plain translateX/translateY instead of translate3D? Using 3D transformation in Chrome always ends with blurry result (not something Greensock could possibly fix unfortunately) and in my case its very important to keep very crisp and sharp shapes. Thank You!
  14. Hi, I have a weird behavior happening with the Draggable utility. my project has the drag being set dynamically after i morph the svg path, into the correct structure. (building this with Angular2 and Typescript, PM for a link to the site. it is not in codepen but will be very easy to see the code in app.component.ts) el is equal to the element which was just created. Draggable.create(el, { type:"x,y", edgeResistance:0.5, bounds:document.getElementById("canvas"), throwProps:true, snap:{ x:function(endValue:number){ return Math.round(endValue/10)*10; }}, onPress:()=>{this.dragging=true;}, onDragStart:()=>{}, onDragEnd:()=>{ this.dragging=false; } }); after the element is created it's fine, but if i drag it there is a slight shift over to the right of about 25px. if i draw new elements the new element gets the shift, and the others work no problem. it's always the last element drawn which shifts. was wondering if anyone else has had this experience. Any help would be greatly appreciated.
  15. Hi, I've got a strange issue occurring with the bounds of my draggable instance. Instead of the minY being 0 and maxY being the height of the container i get completely different values so i am unable to drag to the end and the beginning shoots off the screen. It looks like the Draggable instance is calculating the bounds from the targeted element and not using the bounds. I am applying a 3D transform to the "container". Then adjusting the position of the child "content". Then the I have the instance of the draggable element. I have set it up this way so that i can control the Z axis easier for elements within the container. Can anyone help? Thanks in advance, Chris
  16. Hello, I have a range slider made of an SVG that uses Draggable and TimelineMax. http://codepen.io/rfenik/pen/YqozPL I want the handle of the slider to move in the center position when the page first loads, so I made a tween that advances the timeline to progress=0.5. However, when I click on the handle the position jumps to the start position (x:0). It only happens once after the page first loads. How can I make the position of the range slider to the center mark without the marker jumping to 0 when you click on it? Thanks.
  17. Apologies if this has been covered before, could't locate it in the forums or on StackOverflow etc. Currently working on a nice little horizontal slider that controls animations for an e-learning project. Unfortunately we work for big pharma who still mandate IE8 support (I know ). Anyway, it seems I've come across a little bug where on using the onThrowComplete method to calculate the end position via this.endX / this.maxX * markers.length fails in IE8. On closer inspection is appear this.maxX returns NaN in IE8. Anyone have any ideas as to what's happening? Cheers
  18. Hi guys, i've been working with your Draggable library and got this issue: i've got an container which contains my draggable object i've got a input slider to zoom in/out my object zooming through CSS transform: scale() when zoomed in/out and dragging to autoscroll, my object will move away Any suggestion how to zoom in/out the object and using autoscroll without my object moving away of the mouse pointer? Thanks
  19. Hello, I'm attempting to make an SVG element (which is already draggable) rotatable by using a handle positioned at the bottom right of the element. I have done this in the past on a div (not SVG) with the jQuery rotatable plugin, which came pre-packaged with this functionality. Does anyone have advice on how to proceed on this to perform the same with SVG using GSAP?
  20. Hi guys, I asked this a few months ago, it seems like for some reason it was ignored so I thought I'll bring it back to the attention of the GSAP dev team. The problem here is that when a Draggable SVG element with "svg { overflow: visible }", dragged out into the overflow area of the SVG, draggable is not able to drag it. This currently only happens in Safari. Is this a bug? Here is the post from the past: http://greensock.com/forums/topic/11225-draggable-svg-element-which-is-also-rotatable/#entry50147 I hope this time it gets some attention and is fixed asap. Cheers!
  21. Hi, First, very nice plugin. I try to use GSAP draggable with the "autoscroll" option, but there is a problem when I scroll down a tile the position is not correctly updated. You can check in the following codepen demo : http://codepen.io/anon/pen/dMqvQx It's seems to me the problem come from the "position:absolute" in the .st-menu CSS style. If i remove this property the draggable autoscroll seems to work better. But i can't remove this attribute in my site because it broke my menu. Is there a workaround for this issue with the autoscroll option ? Thank you. Keep up the good work.
  22. I was using draggable on an SVG element and this was popping up, when testing my work in chrome , this warning pop up in the console log: 'SVGElement.offsetWidth' is deprecated and will be removed in M50, around April 2016. See https://www.chromestatus.com/features/5724912467574784 for more details. It was saying it was coming from Draggable.min.js:14. I was wondering if i should be worried about this warning since i will be using this plugin on svg code during and after that time frame? Will the plugin will be updated for this or should i not worry? Brad
  23. This chunk of code was working great in one JS file, but now I'm using the code in another project and it's giving me this error in Chrome: Draggable.js:2186 Uncaught TypeError: _unwrapElement(...).getBoundingClientRect is not a function The line in my code that's triggering the error is the line below, "if (this.hitTest..." function onDrag() { G.hitting = null; tile.positioned = false; for (var i = 0; i < G.tiles.length; i++) { if (this.hitTest(G.tiles[i], G.dragThreshhold)) { G.hitting = i; } } console.log("currently hitting "+G.hitting); } How do I go about troubleshooting this? I'm sure the error isn't actually in Draggable.js, but instead it has something to do with how my code is set up. FWIW, the code chunk in the broken page is identical to the code in the working page. I've tried changing the order the JS scrips that are being loaded on the page, but no luck. What are some other things I can try to troubleshoot this?
  24. Hi guys, I'm building a bit of unique accordion where the sections are cards that swap on top of each other. the idea is to have the top one stuck to the top at all times. In order to set this layout up I've made the wrapper position relative with the sections position absolute with a top of 0; I'm making the tops of each section offset using translateY via js because the accordion needs to be dynamic. I'm almost there it feels but I can't seems. Howver my challenge now is to make is so when you have slide 1 open. if you swipe up from slide 4 to have slide 3 and 2 track up wards with the movement. I've got it behaving correctly via taps but I really need it work with dragging as well. any thoughts? Thanks! Jason http://codepen.io/OrganicPixels/pen/VaXbVV
  25. I'm able to import and use TweenMax in Angular2 with ES6 and it's working great in the environment. I've include the gsap libs into my build through npm and I'm importing the module using ES6 like so: /** * Import Libs */ import * as TweenMax from 'gsap'; /** * Exports for others scripts to use */ window.TweenMax = TweenMax; but when attempting to import the Draggable utility import * as Draggable from '../node_modules/gsap/src/minified/utils/Draggable.min'; I get the following error: Draggable.min.js:15 Uncaught Error: Cannot find module "TweenLite" In ES6 do I have to export TweenMax first for the Draggable module or is there another method for making the TweenMax module available for the Draggable module?