Jump to content
GreenSock

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


Forums

  • 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

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

  1. I have a carousel that animates by xPercent when clicking menu buttons. I also use the Draggable with ThrowPlugin on the carousel to swipe left and right on sections of that carousel. The menu tween uses xPercent (which is what I want, since the carousel keeps its place on window resize) But the Draggable tween uses either translate3D or matrix by pixel values and not percentages. By the way, I'm use an array for snap: {x: [pos1, pos2, pos3]} I've been able to figure out the new percentage and remove the translate3d value using 'onThrowComplete', but the Draggable values is not cleared. So my questions are: 1. What is the best practice to integrate a regular tween and a Draggable tween on an element, when xPercent is required on the regular tween? 2. What is the correct way to flush out any values when a Draggable event has completed? Any help would be appreciated. Thanks in advance.
  2. Hello, After looking online and on this forum, I create this new post to see if anyone had the same issue with GSAP Draggable. As you can see on the screenshot below, I use a Draggable instance with type: x to create a main horizontal scrollview. Inside this scrollview, there are several boxes which all have a vertical native scrollview, using css properties : overflow-y: scroll; -webkit-overflow-scrolling: touch; It seems there is a conflict between horizontal Draggable events and native browser scroll when this scroll applies inside Draggable element. It is not possible to drag the mainview if the touch event is fired inside the native scrollview; only native vertical scroll is working. (if you drag on the header, which have no scroll, Draggable horizontal scroll works, but if you try to drag horizontally on the grey block, no horizontal scroll occured) - The issue occured on touch devices : Chrome Android, Firefox. The issue can be reproduced on latest Chrome Desktop with Touch simulated - It works on Safari iOS devices (iOS9, 10+) You can reproduce the issue on the codepen below; You will need to simulate touch events to reproduce. I tried to enable/disable "allowNativeTouchScrolling" but the issue is the same. Do you have any idea how to fix that ? The only solution should be to apply a Draggable instance to replace each native scrollviews, but may have performance issues on low Android devices. Thanks for your help.
  3. Hello, I'm trying to use the Draggable.create() method with an instance, in Animate CC (HTML), but i can't. I can use TweenMax, but Draggable is not possible. Of course, i added the link (<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/utils/Draggable.min.js"></script>) to my web page. Does anybody succeed in adding a drag and drop technic thanks to the Draggable.create() method? David Archive.zip
  4. In the docs (https://greensock.com/docs/#/HTML5/GSAP/Utils/Draggable/) I notice it says that to use Draggable, all you need is TweenMax. "REQUIREMENTS: TweenLite and CSSPlugin or just TweenMax which contains both." However, at the top of TweenMax.js (v 1.19.1) it says "Includes all of the following: TweenLite, TweenMax, TimelineLite, TimelineMax, EasePack, CSSPlugin, RoundPropsPlugin, BezierPlugin, AttrPlugin, DirectionalRotationPlugin" and there is no mention of 'Draggable' anywhere within the file. The CSSplugin.js file also seems to contain no mention to 'Draggable'. I am having to include the Draggable utility separately in order to use it. Is this an error in the documentation, or am I missing something?
  5. Hi Ive been struggling to figure this out for about 3 days now. I am creating columns dynamically that are added to a container (when user clicks the add button). Using the draggable plugin I have made them draggable (only horizontally). Everything works fine but what I am stuck with is when a column is dragged and dropped on another then (the dragged column) should be placed either to the left or right of the target column. This is my code thus far. Any help will be greatly appreciated. Draggable.create($element, { // use $element instead of ".column". This is declared at the top ^^^ and refers to this specific instance of 'column' type: "x", edgeResistance: 0.65, throwProps: true, bounds: {left: 0}, lockAxis: true, autoscroll: 1, trigger: $element.find(".drag-handle"),// Use jQueryLite (built in to Angular) to find this column's drag handle onPress: function () { columnList = $(".column:not(#" + $element.attr("id") + ")").toArray(); initialCoords = ($element.css("left")); console.log(initialCoords); }, onDragEnd: function (e) { for(var i = 0; i < columnList.length; i++){ if(this.hitTest(columnList[i], overlapThreshold)) { var jqueryColumn = $(columnList[i]); var objectTwoCoord = jqueryColumn.position(); console.log(jqueryColumn); TweenLite.to(this.target, 0.5, {x: initialCoords }); } } } });
  6. hello! Just getting starting with JS and GSAP, had a question about what I'm trying to achieve: There's a GSAP 360 slider of a image sprite created here: http://codepen.io/jamiejefferson/pen/IeLGB if you swipe / mouse drag you cursor over the sprite, it animates through the sprite creating the 360 view. I wanted to add a input slider such that the input slider could also be dragged / swiped on as an additional way of advancing through the sprite sequence. The final sequence i'm trying to get to work with the swiping + input slider is something like this : https://codyhouse.co/demo/360-degrees-product-viewer/index.html Any way to append a HTML slider to that GSAP 360 mentioned earlier? Sorry about the noob question, any inputs would be super helpful! Thanks!
  7. I'm trying to create a draggable/sortable interface based on the Sortable Grid Using GreenSock Draggable example codpen. All is working fine, but I am trying to create 4 empty "placeholders" at the top of the sortable grid, something like: The placeholders act like empty grid spaces, they are not draggable, but rather draggable elements can be dropped into them. When the grid is recalculated the placeholders do not change position. Draggable items can also be dragged out of the placeholders and back into the grid. I've somewhat accomplished it by adding the relevant HTML elements like so: <div class="placeholder"></div> <div class="placeholder"></div> <div class="placeholder"></div> <div class="placeholder"></div> <div id="list"></div>And then modifying the onRelease function like so: if ( this.hitTest( $(".placeholder"), 0) ){ // draggable has been dropped in a placeholder } else { // this is the normal part of the onrelease function from the demo // Move tile back to last position if released out of bounds this.hitTest($list, 0) ? layoutInvalidated() : changePosition(tile.index, tile.lastIndex); ... This works in that the dragged item remains in the placeholder element and can be dragged back out, but I'm struggling to find a way to get the dragged element to snap to the placeholder. Any suggestions?
  8. Hello , I managed to find solution to drag content of TextBox up and down but its not stable . once you hold down the scroll-bar and start dragging its working but if u leave the scroll and try to do it again its not working Can i use GreenScok draggable to do that professionally ? I really feel sad i bought green-sock membership thinking that draggable will work fine but its been few days no success this is the example code i hope someone with experiance can guide me how to drag content inside Movie Clip at the stage using same concept " am using Adobe animate cc Canvas Project is attached . --- tl = this; createjs.Touch.enable(tl); linesOfTextF(200); function linesOfTextF(n){ for(var i=0;i<n;i++){ tl.TextBox.text += 'this is line '+i+'\n'; } } paramF(0, 48, 146-20 , 48+146-tl.TextBox.getBounds().height); function paramF(x1,y1,x2,y2){ tl.m = (y1-y2)/(x1-x2); tl.b = y1-tl.m*x1; } //this tl.sb.thumb.addEventListener('mousedown',startdragF); function startdragF(e){ stage.addEventListener('stagemousemove',dragF); stage.addEventListener('stagemouseup',stopdragF); } function stopdragF(e){ stage.removeEventListener('stagemousemove',dragF); } function dragF(e){ if(e.stageY>=48 && e.stageY<=48+146-20){ tl.sb.thumb.y=Math.floor(e.stageY-tl.sb.y); tl.TextBox.y = Math.floor(tl.m*tl.sb.thumb.y+tl.; } } --- Thanks test2.zip
  9. I'm trying to use draggable for zooming in and pan pictures. When I zoom out the picture with scale TweenLite.set(image, {scaleX:0.5, scaleY:0.5}) then the scrollable overflow size remains the same. Example: Draggable is 200x200px The picture is originally 1000x1000px, so the initial overflow area is 1000x1000px. After scaling the picture becomes 500x500px but scrollable/draggable remains 1000x1000px. The picture has a 250px margin around is and now I can drag the picture out of sight. What I want is that the overflow area collapses to 500x500px. I tried skipping scale and set height. Then the scrollable overflow height adapts but not the width. I can drag the image out of sight. In source code I see that then dynamically inserted <div> has a padding-right that causeses this. How can I fix this? I'm scratching my head for hours now.
  10. Hello! See my pen here: http://codepen.io/llan/pen/NdwYJb I'm building a configurator, where certain elements can be drag-and-dropped into different slots. I have implemented the cloning mechanism mentioned here: https://greensock.com/forums/topic/10466-draggable-cloning-option/ This part of working fine. In addition, I want the new elements to snap to their respective slots. For this, I have used the code from: http://codepen.io/antpearson/pen/IaAfl Snapping works for the first element I drop onto a slot. For each additional element, though, snapping doesn't work. I suppose it has something to do with the JS code in line 45. I've been trying to figure this out, yet without success. I would really appreciate your help. Thanks! Laurent
  11. Hi, I'm currently bundling up my client up using requires and browserify. I installed gsap using npm install, and it seems to only expose TweenMax. I managed to bundle Draggable using './node_modules/gsap/src/uncompressed/utils/Draggable.js', but hte resulting require('./node_modules/gsap/src/uncompressed/utils/Draggable.js') looks pretty ugly. Furthermore it sees that TimeLineLite is not exposed either, even though it's contained. How can I access the various components using the npm module? Thanks, Sven
  12. Hello Everyone, i am learning my way to move from Flash to HTML5 . GreenSock Forum is an amazing place . thank you all i was stuck for a few days trying to understand the Draggable and trying to integrate with Adobe animate cc in order to build Simple scroll-able Data grid I've done that with flash before but in the attached project Draggable always returning "Can't Tween a Null Object object ... var root = this, t; t.from(root.ExampleMC, 1, {y:"500", ease:Back.easeOut}); // working fine Draggable.create(root.ExampleMC); // returns error of null object Any help is highly appreciated i wanna add basic square to act as a holder of all rows and be able sort and load and scroll up and down same as any data grid Please review attached simple example Thanks Grid2_testing.zip
  13. Hi, i have problem with smooth SVG elements animation controlled by draggable. Its not working properly, pls check codepen http://codepen.io/mkurdziel/pen/XKEzxm. First thing is that not every element in animating, whats more, some of them are not coming back after animating. I think that TweenMax.ticker.addEventListener("tick", updateVelocity); is not working properly, pls check console. As you can see, its not registering all of the "move" there are gaps between numbers e.g. 100, 105, 107. It should be 100, 101, 102, 103 etc. Do you have any idea to resolve this problem?
  14. Hey guys! I have something I'd like to implement which you could consider to effectively be a floor plan for a venue. I've advocated GSAP for a while now and so thought I'd explore what was available for it. I like the look of draggable a lot. Effectively I'd like some advice. I want to create an area on the screen and that can zoom/pan and allow me to add elements to a grid in the form of differently shaped tables. The size of the floor can grow (ad infinitum) depending on the positioning of tables, but there will always in practical terms be boundaries to the floor. A table may have dimensions of let's say 5x5 (as in grid squares) and I would like to be able to drag & rotate them as part of Angular 2 app, with them snapping to the grid. Draggable has a lot of the features I require. I'm wondering whether anyone thinks I could suitably achieve this solely with draggable and a bit of vanilla JS, whether using draggable alongside canvas/webGL would be more appropriate, or whether it wouldn't fit my needs at all. Any recommendations here would be greatly appreciated. I would love it if anyone knew of any examples like this too, I've searched around but not found anything too similar as yet. Many thanks, Alex
  15. Encountered this issue today while working on a Draggable in Chrome on Windows 10. If I set the type to "x" or "left", my Draggable wouldn't move left and right when I clicked and dragged on it. This only happened in the latest version of Chrome. FF and Edge were fine. (Note that if I set the Draggable type to "x,y" but then used bounds to prevent the element from moving on the Y axis, the Draggable worked just fine.) I found this thread from 2 years ago: Draggable fails in Win 8 touch with type='x' and setting "allowNativeTouchScrolling" to false did fix the issue for me. However, I'm using a desktop, not a touchscreen, so I thought the solution was a bit odd. My question is if allowNativeTouchScrolling is the proper way to fix this issue now and in the future. Also, is it just me or has Chrome been turning into a crap browser lately? It started with their ridiculous decision regarding "will-change" and has gotten worse since then.
  16. Hi, I originally posted this as a reply to another topic, but it has since been marked as "Answered" and it got buried. So, I figure it's best to post a new topic for this issue. Essentially, event.preventDefault() in Draggable's onClick callback no longer works in Chrome 55. The problem only appears on Chrome 55 with touch events (regular mouse clicks are fine). I've created a minimal demo + instructions for reproducing the problem here: http://codepen.io/nyordanov/pen/qRBwEV Our current workaround is to add a 100ms delay between the click and the opening of the submenu, but we'd be grateful if you could offer a permanent solution.
  17. I set the draggable to horizontal move (type: 'x') for a svg slider button. Sometimes while mouse was moving, the button kept staying at the same location. The vertical drag(type: 'y') worked just fine. You could see the test in Codepen link. Does anybody have any ideas about that?
  18. Hi Guys, I'm trying to achieve something that probably is very simple but I think i surely missing something. So let's say I have a draggable in the position x:800 y: 200 Now I drag it to the position x:500 y:100, and after releasing the draggable, and from this point onward, I want to make the origin of the draggable this last position. So all the transformations would be applied from this last position. I hope my explanation makes sense . Is there a simple way of achieving this? Thanks.
  19. Hi all, I've been using GSAP for a while now and frequently browse the forums for advice/tips. The GSAP team makes amazing products and I couldn't be happier with them. Thanks for all the great work! Recently I've been having a lot of fun with the Draggable utility, but just ran in to a couple of problems today within the Chrome browser on Android. I would like to start dragging my Draggable when a separate "anchor" element outside of the Draggable is dragged (touchmove'd) left or right. Kind of like a "hotspot" to start the dragging action. For reasons unknown to me, the following codepen does not work properly. However, if I change all "touchmove" listeners to "mousedown" listeners, the codepen behaves as expected when using a mouse. Full disclosure: it's actually a different issue I was trying to resolve regarding the way Chrome handles touch events vs pointer events when I ran into this little stumbling block. I'm sure that my issue here is something small/silly. Thanks!
  20. When I call .draggable() on cloned element it result in different size of element. I am not sure if .draggable() even from greensock, it's looks like it's from jquery. But how in that case should I clone elements and have everything working? $("#google").clone().prop('id', 'copy'+1).draggable().appendTo("#container");
  21. I am using draggable allowing me to drag around elements. On each click the z-index of the item being dragged increases by one. This means that the item dragged is always shown above other elements. I have other elements that are not draggable but I want to be able to reference the current z-index and set it on these non-draggable elements. Does this make sense? Basically I want to access the current zIndex value. http://greensock.com/docs/#/HTML5/Drag/Draggable/zIndex/
  22. Hi guys, I want to make an 'endless' list that is draggable. Each list element needs to snap in the center of the screen. I got those parts working with throwprops' snaps and a proxy element. Now the whole thing also needs to be zoomable. That works too, but the snapping stops working when zoomed out. I can't figure out what parts I have to scale myself and what parts TweenMax scales for me. I set up this pen, im sure you will get where I want this to go: http://codepen.io/mbuesing/pen/XNRrog I put a green line in the center so you can easily see when an element is centered. The center of the element in the middle should always line up with the green line. In zoomed out mode that doesn't work. The calculated offsets are shifted. I suspect it has to do with the update function, in line 60 i subtract the double list width, but that isn't updated to the new zoomed out size. If I do changed it to that, the list will be in a wrong position after the zooming animation. Any ideas? Thanks Moriz
  23. I want to use draggable without it setting any style for me while dragging I found out about zIndexBoost: false to prevent it from messing up with the z index values. cant find anyway to prevent it from dealing with translate3d values, did I missed something? thanks
  24. I'm new to GSAP. I'm learning to work with the Draggable plugin. I can't understand the principle of the x and y properties of the Draggable plugin. I gave an example on Codepen to illustrate. Why when you click on the element block in the console returns a 0 value on the X-axis and the Y-axis? Because this unit is set to 20 on both axes. How is the calculation of the coordinates for this block?
  25. I'm using Draggable to give a few elements the option to be dragged around the viewport. I have a function that I'm calling later on that needs the position (x,y) of these dragged items. Is it possible to get the x and y values of those dragged elements? OffsetTop is not working due to the 3d translates.
×