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
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

  1. I've a draggable bar, which can be drag horizontally. What I want to do is, on page scroll Is it possible to trigger draggable event to drag? Or is there any other way to achieve this. I already posted this question in StackOverflow but didn't get any response, So if someone could help me on this that would be appreciated.
  2. Just curious if Draggable now works with EaselJS and Canvas? I found a post from almost 7 years ago where the answer was no, but that was 7 years ago and now I know that GSAP 3 is compatible with EaselJS I even use it inside of Adobe Animate which I do a lot of programming in. But my issues is If draggable is compatible now I am not sure how I can target my movieclips. Draggable.create(Main.MorningTasks.getChildByName(Root.ScheduledTasks.Morning[i].text), { type:'x,y', bounds: Main, onClick: function() { console.log(Task.name); }, onDragEnd: function() { consol
  3. Here's a CodePen illustrating an issue that I've struggled with on and off again for a couple of years now. I'm not sure if these struggles are due to my misunderstanding, or if there is a problem with Draggable.js. This first demo is using the latest version of gsap and the beta version of draggable. I'll add a reply with a demo and analysis of version 3.0.2, which behaves differently. The menu pulls out from the left. (Could be a little more refined, but it works for this demo.) The shaded gray region at the right of the menu is a little grab bar that protrudes w
  4. I have a Draggable demo that displays some odd behavior, especially in Android webview (and Chrome). Here's a list of what I am seeing. Swipe arrow to the right and watch what happens. Do the same in Chrome on Android. If you hold your finger for too long, the click event will fire and detach your finger from the draggable element. I've tried everything I can think of to stop this from happening with no luck. In Chrome for Android, if you are swiping down as you begin your touch, it will almost immediately detach from the .circle element. This behavior does not hap
  5. Hello there! I'm not entirely sure this has anything to do with gsap, but I don't know who else to ask. I'm working on an app to play cards, and broadcasting events. I won't bore you with those details. I use Draggable with the onDrag listener, then broadcasting the draggable's style.transform I pick up the changes with this: eventSource.addEventListener("cardPosition", (e) => { const data = JSON.parse(e.data), target = document.getElementById(data.message.id); target.style.transform = data.message.transform; }); This works, but the dom seems to be confused about t
  6. I would like to force a rotating drag element to rotate according to the mouse X axis instead of the actual circular move, I don't know if this feature is implemented in Draggable. PS : The slider on the Codepen doesn't affect anything, it's only here to help understand my problem. Thanks!
  7. Hi friends, I'm trying to develop a carousel based on this example. I removed the "infinite" feature and I'm trying to create a transition on cards while dragging, that is: while dragging the slider, Card 1 scale down (to the size of other cards) and Card 2 scale up. (When the transition ends I'll get Card 2 title inside and inject in "carousel__card-title" element with another animation). Because of this I think it needs snap in order to determine when a single card transition ends and eventually let control by navigation arrows (next/prev). I'm struggling to understand how to handle the
  8. Here is a question that I was pondering. I was studying the applyBounds() for draggable objects. This allows me to restrict objects to a particular area. Is there a way to restrict objects from an area? In this sample pen - I can keep the three balls in the larger box just fine but what if I want to keep them from overlapping at any time - no matter where they are positioned in the box? I'm not even asking that they push each other around but I would just need to drag around them rather than over them. Did I miss a simple thing somewhere? (Just imagine three baseballs
  9. I am trying to develop an infinite canvas animation which show cases a number of clickable images on it. On moving the cursor the images will move in the opposite direction, I tried this with div now, is it possible to use Canvas for an infinite scroll effect. Plugins used: TweenMax, TweenLinte, ScrollToPlugin, Draggable
  10. Hi, New to GSAP & absolutely loving it so far! Ran into an issue though with Draggable on mobile. It works great on desktop/ipad, but when I try and drag a div horizontally along an svg line on my (old & janky) Motorola, it brings up the context menu (copy/select etc.). I've tried putting in the allowContextMenu explicitly, as below, but it still doesn't seem to latch onto the target (a div). Has anyone encountered this issue before? Any advice/help would be amazing! Sorry I haven't created a codepen - the scenario involves 2 massive svgs and loads of timeline code as well Happy
  11. Hi guys, This is my first time working with gsap and I'm running into an issue with my slider. I've created this slider, now it's starting on <div class="first"> on the left. What I'd like to do is to center the slider on <div class="third"> on render. I'd appreciate your help
  12. Having problems with touch on some projects that are using Draggable I am now diving into this. I'm having problems with touch on both rotating draggables as well as translating draggables on several browsers, but Firefox seems to be the most problematic one. This thread though is about a particular draggable issue that only seem to affect Firefox, while other browsers seem to work fine: The codepen included here is, as you can see, as easy as it can get. A svg circle where Draggable is put on with inertia and rotation. Touch in this example is running fine in browsers like Chrome
  13. Hello guys! I'm truly new using Draggable product and I'm having a problem that I didn't find any solution on web I want to increase size to my container when the target hits the edge of. Actually, I'm using edgeResistance and it work very well but instead, I need to start a function that verifies the size of container and increase X px to width or height (depends where it hits) There's any option to verify when the target hits the edge and where (x,y)? Thank you
  14. I don't find an example from the draggable knob that does following (based on my codepen live example): - knob is on position 15 percent - I tap (touch) on position 70 percent - knob moves to position 70 percent It is only possible to tap and move (drag) to that position. I don't find anything in your docu. A "simple" answer from you will be "tap or touch" is not "drag". But this doesn't help me. A link that explains what I want. https://radmie.github.io/ng-knob/ My link to my codepen live example. I want only show the mi
  15. "Draggable.min.js:10 Uncaught TypeError: Cannot read property 'getComputedStyle' of undefined" All dependencies are ok ... is it a CSS default or other overlapping issue ?
  16. Hi guys, looking at the docs (https://greensock.com/docs/v3/Plugins/Draggable), setting either dragClickables:true or adding the data attribute on the HTML element you want to be clickable data-clickable="true" would make the browsers default behaviour take precedence. However, using the proxy approach, the draggable is only an empty div. Are there best practises on making children clickable in this case? One solution that came to mind was to find the closest element based on it's x/y position and the click x/y , but hopefully there is a smarter way
  17. Hi! I've just discovered GreenSock yesterday and the whole suite of products and it's kinda awesome. Learning the basics is very simple and even more advanced stuff is pretty accessible. But sadly I'm facing an issue with Draggable. I've noticed that it it's not possible to drag an element out of a scrollable div. The element just keeps scrolling in it's own div, but he can't escape it's own div. To clearify the situation: I'm buidling a scrollable bar at the top of the page (which kan be hidden/shown). That bar contains draggable elements that will be dragged onto an element
  18. I am creating a drag & drop exercise. When the user is done dragging, the dragged object should automatically animate to its target. This works correctly in normal circumstances. However, when the parent container is scaled, the calculation for determining the target position does not work and the dragged object does not land correctly on the target. I thought it might be related to dragging using x and y, so I changed the code to use left and top. I still have the same issue. You can see the issue in the CodePen. The viewport container element automatic
  19. Hello, how can i achieve multiple list divs? and it the items will drag only inside there own divs Thanks in advance! edit; please excuse my english. edit 2; what i want to achieve is have multiple <div id="list"></div>
  20. I've been updating a working slider to GSAP 3 ? and am getting this breaking error: Cannot read property 'parentNode' of null. I've created a very simplified codepen where you'll see a working draggable box (for posterity) and one that uses a proxy, which causes the error. Could there be a bug in Draggable.js? The culprit is the updateMatrix() function at matrix = getGlobalMatrix(target.parentNode, true);. My proxy doesn't have a parentNode, so we're passing null here to getGlobalMatrix. If we hop over to matrix.js the getGlobalMatrix(element, inverse) funct
  21. Very rarely, about 1 out of 100 times (sometimes you have to re-run the pen even), if you try to drag these items around very rapidly (as in click, drag, release and immediately click and drag again, over and over) Edit: to replicate consistently, place the mouse on the last pixel on any edge of DragItem1 (so the very first pixel where your mouse turns into a drag icon), then drag away from that edge (so if you choose bottom edge, drag downward). You will see via the console logs that the PointerEvent target inside onDragStart is a totally non-draggable element. In the onDragPress, t
  22. Hi there, in one of the projects i am currently working on, i implemented a "Draggable" (nothing special) to provide some kind of knob for the user. Everything works fine as expected, until the DOM-structure has been changed (unfortunately it has to be that way). The knob now shows some strange behavior. I forked a PEN (https://codepen.io/GreenSock/pen/ywpet -> https://codepen.io/anon/pen/yZMLEV) to show what i mean and only added some HTML and CSS to build a minimal setup. The problem is, that the mouse is not following the knob-handler as precise as b
  23. Hello I have updated an older project with GSAP 3.0.1 and ran into a strange behaviour. I had used Draggable & ThrowProps plugin before. The new code is just like this: Draggable.create('#test', {type: 'x', inertia:true}); With the new scripts it suddenly threw an error: “Uncaught TypeError: Cannot read property 'scrollWidth' of null at za (Draggable.min.js:1)…” I reduced the project to the single line above for CodePen. It mysteriously worked on CodePen but not offline and not on my local server. This it gave my an idea: I checke
  24. Hello everyone, First of all, my apologies for my English, because this is not my mother tongue. I’ll try to do my best :) I'm a beginner with javascript. I have multiple box on a page. Each box can be colored by « swiping » it (from the left to the right). The important things are that the box should not move when « swiping »and it shoult be togglable. I successfully made an example with one box (you can see my pen). What i try to achieve is having multiple colored box instead of only one. Each box can be modified independently. But i can't figure out how to do this. (
  25. Hi gang! I'm new to the party but just finished my first GreenSock implementation. Congrats on v3! Seems like I showed up at the perfect time. Once you catch all of the documentation issues (Draggable seems to have literally improved overnight!) this library will truly be my new favourite thing. For example, here is my implementation of a fancy knob that will scrub at variable speed depending on how far you turn it to the left or right. It will scrub even when you're not dragging the knob. Experience gives me the wisdom to recognise that this implementation would not be terse or po
×