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. Hello, we're working on a full-screen sliding interface and got in to a ruckus when trying to show it in IE11. It seems to be only to drag back the amount of padding instead of whole width of the content. Is this a Draggable issue or is there a way to fix it with css? Thanks in advance
  2. I need to be able to get the position of the box or a way to know where the box moved and update the state. onDragEnd I can't pass the this.x for some reason, not sure if I'm missing anything. Here is the Demo: https://codesandbox.io/s/stoic-wood-zuyel?file=/src/Box.jsx
  3. I'm trying to use Draggable with React and I don't seem to make it work. Currently I have this code and the version of react: "dependencies": { "gsap": "^3.5.1", "react": "^16.8.1", "react-dom": "^16.8.1", "react-gsap": "^2.2.1", } Update: Here is the link to code: https://codesandbox.io/s/gallant-morning-2ggfm
  4. Hello. I need your help. I don't know gsap well yet. But I need to create an animation, and I don’t know how to do it. This is the slider. Can you make it infinity? And also do it on a scroll, but not so as to turn the mouse wheel on the slide. Can smoothly wheel the slider, and when you stop turning, the slide that is more captured is the one that becomes active? I understand I probably want a lot. But I already don’t know what to do. Help me please. Thanks to everyone who will respond. Perhaps there are other options for how you can do this. I will be gl
  5. Hoping this is a quick fix. I've looked over the forums and implemented (allowNativeTouchScrolling: true) for GSAP's boilerplate slider, but it still interrupts the vertical scroll. I'd just like to glide over it, like any image, etc. Appreciate any help here: Thanks for all.
  6. Hi everyone, I'd like to just start off by saying this GSAP is fantastic and this forum is a wealth of knowledge for an extremely noob "programmer" (I use that term very lightly lol) like myself! I'm trying to have a dragable div, which will auto create a MotionPathHelper onclick of a button. You can see in the pen that after dragging and when the path is created, it seems to add on the distance I've moved the element, previous to creating the path. Is there a simple way to avoid that happening? Forgive me if it's obvious as I'm very new to programming.
  7. The minimumMovement property to configure a Draggable can actually be a float. The docs say it's integer. This is good to know if you are dragging elements of an SVG element of just a few units high/wide.
  8. Hi, do you have any tips how make a dragger/timeline or progress bar fulfill by itself as the mouse is being moved? Additionally, how to read its value in real time? I want to update mood.progress() value adequately. In short words - the goal is for pet's mood to get better as you move your mouse. Right now you can do it by dragging a dot on a slider. I'm using GSAP since yesterday. I've been fighting all day with it and cannot think of any proper solution. Thanks! [EDIT] Solved
  9. Hi everyone, I made some card concepts using the Draggable plugin, but the problem is that sometimes clicks or drags doesn`t work. Any ideas why this is happening and how to fix it? Thank you!
  10. Hey Team, We've been working with all GSAP modules for a long time and it's great. Love the additions and included types for Typescript support. Today I've noticed that the minX/minY readonly properties are missing from the types in draggable.d.ts causing an error. The maxX/maxY properties are there: readonly maxX: number; readonly maxY: number; Maybe we need to use other properties, but I've been using minX/minY for a long time already.
  11. Hello, I've created a projects slider with interactive draggable projects menu. The snipped runs bi-directionally - if you scroll through projects it uses scrollTrigger to update the projects menu, and in reverse - if you click items in the menu, it scrolls the website to the chosen project. The problem is with the draggable projects menu, it works great on desktop and on android firefox, however in Android Chrome and on native Samsung Browser the links don't always work. It changes colour, as if the hover event fired, however touch/click doesn't register. I've tried ad
  12. Hi everyone, Thanks again for the amazing tools, I am a long term user now and still amazed everyday by the gsap platform ♥️ I am trying to completely stop the dragging and tweens of a Draggable instance when clicking on a button in order to move the dragged item programmatically and prevent jumps. I use the endDrag function, but when the draggable instance is configured to use inertia and snaps, it always complete the snap first no matter what. How can I be sure that every tween is stopped when using endDrag(), even the inertia related ones? I can
  13. altaircena

    Draggable

    Hi, I've got some Qs, I wanna create a draggable slider in react like in "http://robinmastromarino.com" and as I was checking the forum, I got confused about the algorithm and also, as I added and tried some of code instances, it didn't work. I use gsap module itself, not react-gsap. plz help
  14. Hi All, I created a JS class that uses the Draggable plugin. Once I added a second slider to the codepen, it will only drag on the first slider. I checked the documentation and gave each one an id just to be sure. The strange part about it's when I try to drag the second slider. It moves the first one instead the the second. Can anyone tell me what I am doing wrong when creating my Draggable.create() on line 214?
  15. dkolb5

    Draggable Slider

    Hi All, I'm having two issues with my current pen: • The draggable bounds don't seem to be working correctly. I'd like them to stop at the min and max. I've tried them as a query-able element or as an object (maxX, minX). • My proxy element is moving and affecting the drag space when it moves. Here's the pen I've been trying to emulate in gsap 3. This one is written in gsap 2: https://codepen.io/GreenSock/pen/JawEyN
  16. Hello Greensock team ! I tried to achieve what i want before posting here, but finally need some help... Basically, I'd like to be able to drag a Pixi container with the Draggable plugin and inertia. Also note that the container is wider than the canvas, so have to correctly set the bounds. I tried with a proxy but can't figure out how to sync the container position with the proxy one. Any suggestion or example ? Thank you !
  17. I am incorporating some basic draggable functionality into a web banner and was wondering if there was an easy way to disable the "toss" ability. I have some text that is animating based on user interaction and i was hoping there was an easy way to just turn this ability off. I can refactor my work into a pen if that makes it easier but i thought it might not be necessary. Thanks in advance!
  18. Hi! I have a problem using draggable plugin with DrawSVG plugin. I have a clock which I can drag to move hands. When I release (dragend), a timer is starting. But if I want to update timer when timer is in progress, I can't reset svg. So more I update, more the svg decreases quicky. Do you have any idea? Thx a lot I'm sorry i don't know how to import libs on codepen... :/
  19. Hi, guys! I'm wondering if there is a way to move an element without the need to hover the cursor on the draggable element? Thank you!
  20. 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.
  21. 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
  22. 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
  23. 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
  24. 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
  25. 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!
×