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


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



  1. Hey guys, I feel like calling kill() on a Draggable instance should probably clean up after itself and reset the DOM element it was invoked on to it's pre-initialization state. Currently it leaves 'user-select: text' on the inline style attribute of each element, overwriting any default user-select settings that may have been previously defined (inline or css). See line 903 in Draggable.js _setSelectable = function(elements, selectable) { var i = elements.length, e; while (--i > -1) { e = elements[i]; e.ondragstart = e.onselectstart = selectable ? null : _em
  2. I have taken the Codepen for "Draggable with "droppable" logic" (located here) and forked it and rewritten a lot of it to to get the effect i am looking for. basically, i do not want any draggable item to EVER overlap any any other draggable item. I spent a good part of the morning today searching the forum and reading up in the docs trying to think of some form of simple collision detection. The idea being to detect a collision and have a simple collision event that would make the divs bounce off of each other. that is not built in to gsap (should be!) and I have not found anyo
  3. Hi! I am taking Diaco's SVG path range slider as a reference and implementing it for some other types of SVG paths like curve and smooth curve. In Diaco's case, he has given the value 'bezier' and the type as 'quadratic' for the SVG path type quadratic bezier curve. What value should be given for a curve and for a smooth curve?
  4. Hi everyone, I'm experiencing odd behavior. Whenever I reference Draggable ANYWHERE in my Ionic 2 app, Cordova crashes and throws this error: "Uncaught TypeError: Cannot read property 'toLowerCase' of undefined" (screenshot included below). When I run the code in the browser doing "ionic serve", draggable works and everything is great. On the emulator or build, the app crashes. If I remove / comment out draggable, the app runs. There isn't any issue with TweenLite, just Draggable. Has anyone else experienced this before?
  5. Refer to the Codepen which is the autoscroll demo from GreenSock. First off, I am totally new to GreenSock. I love the smooth functionality of this right out of the box! I need some additional things for my app and I am hoping for some pointers to get me rolling in the right direction. (1) If you throw the green div and it flies out of view I want a corresponding button for that div (maybe in a top nav bar?) that will smoothly scroll the autoscroll area to bring that div back to the center of the screen. This will make it easy to find that "lost" element.
  6. Hi there, just got a club license to use the amazing ThrowPropsPlugin in combination with `draggable` and `type`:`scroll`. Now I would very much like an option to make the scrolling snap to certain elements, if flicked. Is there an option or approach for this?
  7. I'm building this "cards" that stack on top of each other and you can drag them to the right to remove it from the stack and to the left to bring the previous one back. This cards also have CTA, trough a "read more" button or, if it's an image, the whole card is a CTA. The "problem" is that the CTA prevents the card from dragging, which is an expected behaviour. Is there a way where a user can drag the cards and still be able to press the CTA? (fyi, the user can drag anywhere on the parent div of the cards to drag them).
  8. Hi all, I'm attempting to create a vertical draggable with for a "fashionable" effect, an everything works as expected on Android, but not on iOS. On Android, the page doesn't scroll when I swipe up on the draggable, and scrolls only when I tap outside of it. On iOS, bot IPhone and iPad, looks like the page has a priority on the draggable (or the swipe event "bubbles" from the draggable), thus the draggable stays almost in the same position, and the page scrolls. In this pen, the gray draggable scrolls into the black box, and overflows it for a maximum of half of the dragga
  9. The newer version(s?) of Chrome are logging a warning about event listeners declared without a passive state. It looks harmless for now, I just wondered if there were plans to add this functionality, or if there's an existing option I'm not seeing that I just need to add. So far I'm only noticing it with Draggable.
  10. Hi, I'm having real issues with a draggable map I've created, specifically on devices using iOS. My animations all run nicely, however when I press and try to drag the map around, there's a good 4-5 seconds before the page responds, and then the move happens instantly, rather than smoothly. If necessary I can provide you with a link to view the development site if that helps, however, I'll need to send it privately if possible? There are a number of layers creating the map, all stacked on top of each other - might this have something to do with it?
  11. Hello, I tried create background slider where slides are stretched on window height and width. Snaps work good because i tried something similar but only in smaller dimensions. I think the problem is in the distance. Which must drag the element so that the slider changes its position to the next snap. I searched solution how can i decrease this distance. But i didn't find something. Thank you for answer.
  12. Hi Everyone! I am working on an audio player that is controlled by a draggable element using GSAP. The audio and timeline animation work fine if the user pauses the clip before dragging the element, but if the user tries to drag the element while the audio is still playing the timeline breaks and returns a timeline.time() = 0 no matter what I try to pass into it. Any help would be greatly appreciated! Thanks!
  13. SimonDucak

    Draggable snap

    Hello, I created container and box. My snaps don't work but when i use liveSnap instead of snap. Then this work well but is only jump without animation. I read documentation but i don't understand this. How can i create snap with animation? Something like this https://greensock.com/draggable when checked button ( Snap end position to grid ). Thank you for answer. Sorry for my English.
  14. Hello, I am working on assisting a colleague in automation testing of our product. We use GSAP Draggable to drag a video in the x direction to close it. The automation library he uses (Appium) has deprecated its "swipe" mimicking functionality, so it is up to me to write a javascript script to simulate the swipe event. So far I have been able to simulate the drag start and drag end events by creating pointerdown and pointerup events and calling draggable.startDrag/endDrag with the pointer events as arguments (we have the Draggable class saved on our window - I use Draggable.get(
  15. Hi all, I want to call a function while throwing. For dragging we have onDrag with OnDragParams. But is there something like onThrow? I want to detect current DIV on position while its getting thrown. Would be amazing! I hope for an answer / workaround to fix this. Working code (but without onThrow) : Draggable.create(PB[m_].el.contentDraggable, {type:"x", bounds: PB[m_].el.contentWrapper, edgeResistance:0.2, lockAxis:true, throwProps:true, onDragEnd:PB[c_].dragEnd, onDrag: PB[c_].whileDragging, onDragParams:[]});
  16. Hey i'm trying to figure out something Say 2 objects are colliding and I'm doing something like TweenLite.to(tiles[0], 2, {physics2D:{velocity:400, angle:0}, onUpdate:checkCollision}); function checkCollision(){ var colliding = Draggable.hitTest(this.target, tiles[5]); if(colliding){ TweenMax.killTweensOf(this.target); } } What i want instead is to update the original tween's velocity/angle to be smaller and not kill the tween. Is that possible or do i have to make a new tween? Thanks!
  17. Am going to be working on a project with a slider that looks and functions similar to a car's manual transmission, where the slider is able to be dragged in an |--|--| formation. So, you'd be able to drag the slider left and right along the middle x-axis, and when it reaches one of the junctions, draggable up and down along the y-axises. I haven't used the Draggable plugin much, so before I spend time trial-and-error-ing possible solutions, I was curious if: This is easy to accomplish with the Draggable plugin. The examples on the Draggable page show that it's easy to make a
  18. So as mentioned in a previous post, I'm following the advice @OSUblake & have been taking apart projects to try and learn as much as possible. My focus is creating a really nice slider that can be updated and made more complex as I learn. I'm not quite confident enough to make from scratch with GASP, so I'm using a friends Flickity logic for the slider & slowly converting it over. My goals were to learn how to: 1. drag slides & lock with a natural feel (✓) 2. navigate with touch/swipe & arrow keys (✓) 3. use mousedown to scale slides down
  19. Folks, While this is not directly related to GSAP, I'm working within that framework but have removed the Draggable config for clarity. You guys are the most clued in crowd I've found in relation to this kind of stuff so thought I'd see if anyone has any thoughts. In the code pen above I've got two divs containing a simple SVG. One of the div/svg combos is created manually, the second is created programmatically. The manual div/svg renders exactly as expected, while the text element of the second does not. Using the element inspector in Chrome, the eleme
  20. Hi everyone, I'm trying to get a TimelineMax sprite animation of an SVG-Background to play while throwing the container. Basically, I was planning on using "getVelocity" with "onThrowUpdate" to trigger the playing of the timeline/the movement of the background-image from the start position to the end position (which is calculated via a function), if progress of the timeline = 0. Unfortunately, I can't make it work properly. At first, the timeline/sprite-animation started only after the throw-movement had stopped. Now, in the codepen, the animation isn't
  21. Hello guys I am trying to make a draggable slide like these: https://www.videinfra.com/ (Page Home) http://www.benmingo.com/ (Page Home) https://bullyingandbehavior.com/ (Page Home) I tried to do with Scale in the Holder but it did not work very well, the closest I got was changing the vw of the holder. But now I do not know what I can do: does anyone help?
  22. Hello, I'm having problems scrolling vertically on mobile because of a carousel made from a Draggable. Can the draggable totally ignore 'y' drags for the page to scroll normally? Regards, Carlos
  23. Hi there ! Starting to get some fun with GSAP ! I'm trying to create an infinite draggable gallery. For this, i started by creating an Isotope grid. Now i want to add the GSAP Draggable plugin but nothing is moving. Draggable creates an intermediate div in my Isotope grid and i think that's what actually break everything. Any idea to fix this ? Thanks for your help
  24. Hi there, I'm having what I would have thought to be a common problem, but can't find a neat solution to it. I have created a simple recreation of it in the code pen below. Try dragging the blue draggable into the grey square, and when you are over the grey square allow the mouse to come outside the draggable slightly which will let the grey box expand. When the box expands the draggable is now far behind the pointer (probably the distance the box has expanded). I want to get the draggable to catch up with the mouse pointer. Have tried tweening by a calcul
  25. Klaus

    Draggable Div

    Hi, I have this code on codepen, When I click on the Year, I'd like to move the active to the center, How can I do that?