Jump to content

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. 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!
  2. 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(element) to find the draggable instance). I know this is working because the onPress, onDragStart, and onDragEnd events are firing. However, I do not know how to simulate the dragging itself. I must do this, because in our onDrag callback, we are changing state which the onDragEnd event uses to determine whether or not to close the video. My question is, how can I force the onDrag event to fire? Unfortunately I cant really reproduce this in a codepen because our code is not open source I have tried using the draggable.drag() method, but that does not work.... HAAALP! Thanks! Mike
  3. 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!
  4. 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 an object draggable along the x-axis, y-axis, or both axises, but is it possible to change that property seamlessly mid-drag? If not, how would you approach creating something like this? Are any CodePen examples that exist already so I can get ideas on how to structure it? Thank you to anyone that can provide some info!
  5. 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 elements appear identical (except for the names) however looking at the computed styles seems to show attributes missing from the generated SVG. If you use the Chrome inspector to copy the text element from the first div into the second, it will show correctly while the second original still does not. Would hugely appreciate any insights! Shaun Hurley
  6. 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 working at all – I figured out, that it has to do with the "backgroundPosition: getClip(9, 4)" in the second "fromTo"-Tween of the timeline, but I can't figure out why. What am I missing out? Any help is very much appreciated!!! THX!
  7. 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 for easy navigation (✓) 4. use count up to change numerical data on slides (✓) ♥ to @Sahil for the crazy example! 5. drag a horizontal scroll bar at the bottom that locks to each section (×) I just can't get my head around number 5. I managed to make it work seamlessly with the GASP draggable knob, but I'm really obsessed with learning how to make a horizontal scroll bar correspond with a slider with draggable. Here's the example I'm trying to recreate (found on the Greensock example page) - http://thieb.co/works Or a lil' GIF for the busy folks Searched the forums/codepen/deep space for examples of this & no cigar yet! Has anyone seen any examples of this with GASP that aren't buried in super complex websites? Best, Smallio
  8. 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?
  9. 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
  10. 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?
  11. 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
  12. 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 calculated distance in the 'onDrag' hook, but this seems to cause it to keep jumping back and forth. Thanks in advance for any help anyone can give me, really appreciated.
  13. 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?
  14. Hi there, Draggable constructs a div around the content of my Element(s). One of those changes the width while dragging horizontal. i know the end position of that element before creation of the Draggable. how can i set the width of the draggable div during creation (i presume 'padding-right' ?), to avoid empty space at the drag end? <div id="scroll__window" class="scroll__window" style="overflow-x: auto; overflow-y: hidden; cursor: move; touch-action: pan-y; user-select: none;"> <!-- // injected by draggable this padding-right needs to be set manually --> <div style="display: block; width: 100%; padding-right: 18836px; position: relative; overflow: visible; vertical-align: top; transform: translate3d(0px, 0px, 0px);"> <div class="stories__wrapper"> <div class="stories__container"> <!-- Stuff --> </div> <div id="scroll__container" class="scroll__container"> <!-- even MORE Stuff absolute positioned & parallax --> </div> </div> </div> </div> (Sorry have not the time for a codepen ) maybe there is a simple answer, i'm not yet aware of?
  15. Hello, I want to know are there ways to do something similar to this (url below), i wish to use greensock as it need to be on touch device. http://subprotocol.com/system/tree.html Things i want to mimic is dragging the "green leaves" which will also pull the rest(other leaves and branches) along with it, the branches have this pull effect. - if yes, then where should i look at. - if no, can you suggest where else can i look at, definitely not verletjs. and then when u release, the "greens" bounce back to where it is (which i think can be done like https://greensock.com/draggable) thank you!
  16. I am trying to make an coverflow slider like used on the HomePage of this website http://www.onedayinmyworld.com/. For reference, I am sharing the codepen demo of my progress and there are a lot of things with which I am struggling. I want to add dragging feature to it with center element highlighted i.e active class added to the center div. Can anyone help in solving this problem?
  17. Hi, So I have a left sidebar with a bunch of Draggable elements that I want to drag over to the right side of the page. The thing is that the left sidebar is scrollable, and when the page height is too small, a scrollbar is shown to be able to see all Draggable elements. The problem with this is that by making the container scrollable, the content is limited to it's container size (Behaves pretty much like a overflow:hidden). Is there any good way to be able to drag an element outside of a scrollable container? So far I could come up with several approaches but none seems to be working fine. 1. Make the container overflow:visible when the user starts dragging the element, but this way the scroll position goes to the top and other UI artifacts may happen. 2. Clone the element to be dragged and put it outside the scrollable element as an absolute position over the parent element. But so far I was unable to perfectly align the cloned element with the parent element, and the move back animation may get to the wrong position if the user scrolls the sidebar while animating. Is there any "good" way to do this? Or any workaround that works in a less buggy way? P.D: The Codepen shows the minimum example where you have a bunch of elements inside of a scrollable area. When you try to drag it out of the scrollable area you will see it gets hidden. Any ideas how to overcome this issue? EDIT: So I finally implemented the method 2, and it seems to be working fine on PC, but there is some bug on mobile devices. It seems that on Mobile the onRelease method is never called from Draggable. This does works properly on PC. I updated the Codepen example. Test in on your PC and it will work. Test it on your phone, you will drag the element, but the element wont ever disappear. Is there any way to fix this or is this a Draggable bug?
  18. I'm using draggables to flip between pages on a site I'm building. If you look at my Codepen, the grey container represents my full screen (non-scrolling) website page. The orange area is what I want to drag and throw. However, I do not want to require the user to have their mouse over the orange area to throw it. They should be able to be anywhere on the screen. You can currently do that until you drag/throw it the first time. Then the grey/draggable container exposes an area that you can not grab to throw the orange. Hopefully this makes sense. I'm having a hard time articulating this. Ideally, I would like the grey area to never move, but accept the grab/drag/throw, then apply it to the orange container. Is this possible? I'm probably looking at this all wrong and it is something simple. At least I hope that is the case. Thanks, Rick
  19. Hello, i'm starting with the Draggable https://greensock.com/docs/Utilities/Draggable plugin and this is my achievement by now I am trying to replicate this Drag & Drop Library: http://sunpietro.github.io/dragster/ -1) Pre-Drop-Hint -> Highlight the area where you gonna drop the element -2) Smooth drop animation -3) CloneBase -> Only draggable option / Copy elements from here, no possible to drop options -4) Move / Adapt column -> If we want to drop an element between 2, the column would be adapted -5) Trash zone -> Only drop zone to remove elements So i started by the point 1 & 2, and it gets weird how the element is dropped. Also i realize that the elements are animated via translate3D, so in case i would want to get that elements dropped into my slots, i guess i have to move into the slot after the transition. as i said, the animation is weird, not smooth like this one, and the code is basically the same. So i have a clone-base at the top, and the elements would be draggables & copies from there, to put into my grid. Can you help me first with the Weird animation & the cloneZone. Or if there is a sample case ( i didn't find it i would love to use it as a guide ) thanks in advance.
  20. Hello, I'm having trouble synchronizing a progress bar with Draggable, I tried doing this simulating a Click event with Jquery, but it did not work well, I think the way improvement is using (Progress) but I did not identify which draggable function I I attribute this. Someone with a light?
  21. Hi Folks, I think I'm missing something super simple, but I can't find it. In the vanilla demo hit test example an element from a "droppables" collection is used as a jQuery selector, and a "highlight" class is added tot hat element while the hit state is true and removed when it is false. The effect is that the element *underneath* the dragged element is highlighted. I want to invert that effect, and have the item that is being *dragged* highlighted if it is dragged over a droppable element. I expected to be able to do this fairly easily by changing the $(droppables[i]).addClass("highlight"); for $(this.target).addClass("highlight"); however this doesn't work. I've included a fork of the GSAP hit test demo as a codepen, and I've also added a couple of console log statements that show that the element being dragged is being assigned the additional "highight" class, but the visual effect isn't seen. Many thanks Shaun
  22. Greetings I just converted my web game (link at bottom) over to GSAP using Draggable, TweenMax and TimelineMax! I launched the site over 10 years ago, built on YUI2. About 6 months ago I decided it was time to drag it into the modern age, so I set upon a total front end re-write, this time basing all animations and drag/drop on GSAP! I deployed the update 2 weeks ago. Since then about 1 million unique users have spent over 10.9 million hours playing. Not a single GSAP bug or issue has come up! GSAP has been ROCK SOLID. WOOT! I just wanted to THANK YOU for making an amazing product that's allowed me to do this massive re-write and launch without having to worry about the animation/dragging aspects. Thanks again! PS: The new GSAP based website is https://worldofsolitaire.com The old YUI2 version is here: http://legacy.worldofsolitaire.com
  23. 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? Any help you're able to give me would be greatly appreciated. Kind regards
  24. I have a circular input with a width and height of 80vw/vh (depending on portrait or landscape).. GSAP Draggable uses the translate3d for the draggable component, but when I resize my window it doesn't center my #controller element anymore because of that.
  25. All, In the Draggable docs at https://greensock.com/docs/Utilities/Draggable there is reference under the "onThrowComplete" property to a "onThrowCompleteScope" that can change the scope of what is being passed to the onThrowComplete function. "By default, the scope of the onThrowComplete is the Draggable instance itself, but you may define an onThrowCompleteScope if you prefer, just like any other TweenLite or TweenMax." Presumably this can be used in the same fashion as the TweenLite/Max onCompleteScope, onStartScope, onUpdateScope, etc. settings. Maybe I'm missing the obvious, but I cannot for the life of me find any documentation or examples of using this mechanism - apart from passing it an empty object as '{}' - anywhere, including the TweenLite / TweenMax documentation, and would greatly appreciate a simple example of what the format for defining a scope to be passed to one of these functions looks like. Any suggestions or a pointer to any documentation I've missed would be hugely appreciated. Specifically, I want the onThrowComplete "this" context to refer to the target element, rather than the default draggable instance. I know I can get the target from within the draggable instance, hoewever I'm to have a single onUpdate function which I would also be calling directly based on other (non-draggable) actions. Many thanks!