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. To get the code to work there is a white SVG named centerwill need to be clicked on. This will be replaced with a play icon, and be swapped out with a pause icon to pause once the dragging works properly. To activate the SVG animation, click the white center SVG. To pause the video, click the native pause button in the html video (sorry still under dev). I have an SVG circle that is a progress bar for the progress of a video's duration named progressCircle. There is another SVG circle that is named vidControllerand it is draggable. vidController is used to update the currentTi
  2. Hello, I'm having a hard time doing a .hitTest with a snap, in case I need my droppable to reach the hitTest in the position of the corner element.
  3. Hello, I have a div with a large background image that I'm using draggable and ThrowPos on for users to drag around a map. I now need to have a small scaled down version of the map so people can see where they are currently in the context of the entire map. It's common to see but I can't put a name to it making it difficult to get a start. The map to date is here: https://map.polycode.co.nz/map What I think I need is: A scaled view of the map as the background for the small version. The width and height presumably a percentag
  4. Hey guys, I find myself in a pretty interesting UI challenge that I think Draggable might be able to solve. I will try to explain it as clearly as possible. Here's what I want to do – on both mobile and desktop: 1. Have a list of edge-to-edge elements (Think the contacts list on iOS without the separators) that the user can scroll through normally. 2. Allow the user to tap / click and select/deselect the list items 3. Hold the finger or mouse button down for 800ms and initiate drag/drop so that the items can be re-ordered. The main problem is having drag and native scroll a
  5. how can i get access to the coords when dragging a div in angular using gsap draggable ?
  6. I'm working on a circular carousel based on an Adobe XD wireframe. The carousel "slides" are arranged using an auto-generated CSS Grid template. Each grid-item is assigned a slide position classon page load. The navigation using the buttons work correctly. the fun begins when I implement drag functionality to the top three slides. The dropped slide is positioned incorrectly and the incorrect positioning continues through it's placement throughout the carousel. I attempted to retrieve the "Preview Slide" offset ( $(<grid-item>).position() in Draggable.onPressIn
  7. Initially, the green box is moving from left to right and the counter number is decreasing from 47,650 to 14,000 but after green box reach to right position, the drag feature is enabled and user can drag green box from right to left and vice versa. The problem I am facing is after dragging, the counter number should also increase and decrease respective to the position of greenbox. Like if I drag greenbox from right to left, the value of counter should increase from 14,000 to 47,650 and if I drag from left to right, the value should decrease from 47,650 to 14,000. Any help will be appreciated
  8. Problem 1: The Draggable.create() does not work unless it is put prior to the definition of t1 (the TimelineMax)... for example on line 3. There are workarounds for this... but I still get problem 2... Problem 2: While t1 is executing if the user drags the #Handle (the orange circle) t1 finishes (as shown by the execution of the onComplete event function for t1. This happens AFTER the onDragComplete, so that the seek & play command in onDragComplete is basically a no-op! I want to have t1 running and be able to drag the handle, and once it is done being dragged start t1 from t
  9. Hi Folks, I doubt this is a bug with Draggable, but I am hoping someone here may have had a similar experience and can point me in the right direction. The bad behavior I am seeing is all contents of an iframe shifting when a user interacts with a draggable button. It does not happen in desktop browsers, but it does in both Chrome & Safari on iPad (have not yet tested an Android tablet). You can see what is happening here: http://marsinc.com/codepen/draggable-tabletbug.html Things I know: The page that holds the multimedia content (background,
  10. See the Pen Sortable Grid Using GreenSock Draggable by GreenSock (@GreenSock) on CodePen. Demo created by Blake Bowen, featuring GreenSock's Draggable.
  11. See the Pen Draggable "Toss" Demo (4col) by GreenSock (@GreenSock) on CodePen. See many of Draggables properties in action including bounds, liveSnap, snap, edgeResistance and more. This demo is a great starting point to get familiar with Draggable and ThrowProps plugin. Fork, edit and enjoy! Be sure to read the [docs id="js.Draggable" linktext="Draggable Documentation"].
  12. Hi guys, I just want to contribute with my findings in case others ran into this. I had been struggling getting GSAP's Draggable to work with Next.js and have finally found a solution. Next.js does Server Side Rendering (SSR) so pages rendered on the server had issues loading the GSAP NPM modules. Please note that pages worked just fine client-side. ERROR: import TweenLite, { _gsScope, globals, EventDispatcher } from "./TweenLite.js"; ^^^^^^ SyntaxError: Unexpected token import To resolve the issue with GSAP not being transpiled, I installed next-plugin-tran
  13. Hi Everyone, I've been trying to recreate one of the infinite Draggable carousel that I've seen in this forum Any idea of what I'm missing? Thank you in advance
  14. Hello, As said above, I am having an issue where when I throw or drag the draggable div it is always bound to the top of the page like a magnet. I didn't set it like this, and can't figure out how to let it move where ever it is being thrown. Does anyone know why this is happening? Here is the link to the repository and to the site. https://github.com/jacobtruax/Mole-End https://jacobtruax.github.io/Mole-End/ Thanks
  15. greg_mich

    Greg M

    I am using draggable on a custom keyboard. The issue I run into is when you accidentally drag on the keys the keyboard drags and the key press is not fired. My question is, is there a way to only drag a component from the background? And not allow drag on inner elements?
  16. Hello everyone, i think this is more of a math related question i struggle finding a solution for. I have a slider that is draggable and stops at the different slides with a snap point. Now i want to tween a value from 0 to 1 while between the snap points. I need a way to calculate the progress to the next snap point, that means 0 if at one of the snap points and 1 if 1px in front of the next snap point, then back at 0 and again from the beginning. Is there some math magic ?that can give me this value? Thanks in advance.
  17. Hi all, I'm trying to use the ThrowPropsPlugin together with the Draggable functionality in my VUEjs website. However every time I set the property "throwProps" to true I get this error: Uncaught ERROR: No velocity was defined in the throwProps tween of [object Object] property: x I know there are already other topics with the same subject opened but I've tried the solutions mentioned in there and nothing helped. Here's my code for reference. If anyone could help it would be much appreciated. Thanks! require('../libs/ThrowPropsPlugin'
  18. Hi, I have created a minimalistic code pen to replicate the scenario CodePen. What I want to achieve is: Child (the cyan rows) should also be dragged along with the parent (greyed area) Child (the cyan rows) should be independently draggable within that grey area This works fine in Microsoft Edge and FireFox desktop browsers but doesn't work in Google Chrome
  19. Hi Just discovered GSAP and what a great library it is! I am having a problem with bounding my draggable components in my React testing. I have followed the great instructions found here (https://greensock.com/react) to get a reference to the React generated DOM element and haven't had any problems making them draggable. The draggables sit inside of another React component which should act as the bounding element. I am again getting a reference to this element as previously described and passing this into the draggable components as props - to be referenced by the d
  20. I'm getting this error when attempting to implement Draggable. I'm confused because I am able to do some of the functions that are shown in the 'Get Started' section i.e var obj = {myProp:0};TweenLite.to(obj, 2, {myProp:100}); I added a codepen - very simple representation of what I am doing. Any idea what's going wrong here?
  21. Hi, I have options with gray border and selected with gray background: <div class="options"> <div class="item">Criancas</div> <div class="item">Bebes</div> <div class="item">Brinquedos</div> </div> <div class="selected"> </div> On javascript part all of items are Draggable. And have the function onRelease that checks if the item "hit" the "selected" div. All works fine, but the final animation. When I Drag the item is ok, but when i release it, the animation to go "back" to the x:0 and y:0
  22. I was looking to see if there's a way to support a multi-finger drag when I came across a year old forum post (http://greensock.com/forums/topic/11897-multi-finger-swipe-on-draggable/). Instead of bringing it back I thought it better to post a new one. Essentially, I need the ability for any number of fingers to be detected the same by draggable. I am using draggable in a touchscreen kiosk to scroll a div within a bounding container. There isn't any pinch zoom or other multi touch gestures that it would interfere with. Users don't understand that the kiosks only work with a one finger dra
  23. Hi guys I have a horizontal fullscreen draggable slider. When I click and drag the slides get smaller and you can drag through all the different slides. Now I have the problem, that I wanna put buttons and play-buttons in those slides, but now always when I click on the buttons, the slider starts dragging. Is there a way to block the dragging on a specific element which is inside another draggable container who should stay draggable? Thanks a lot for your help!