Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'drag'.

  • 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

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

  1. Hi, I have a card game which currently handles the cards dragging by simply editing the rotationX and rotationY depending on the mouse movement direction. Then in the onEnter loop I "force" the rotationX and rotationY to move towards 0 by slightly increasing/decreasing their value on each frame. This results in a quite poor 3D effect movement since the transition isn't smooth enough, plus it doesn't feel like a 3D transition (since it's obviously only 2D). We are using plain Flash for this, so no CSS or JS can be involved, we only use GSAP tweens. Our aim, is to create something like hear
  2. Hi, I'm trying to animate the drag for the swiper with tweenmax. Now the dragging option is to quick and jerky. Dees anyone know how to animate the drag option with tweenmax to have an easing accelerate effect? Here is an example with a slider who has the drag options with nice easing options: http://www.benmingo.com/ Thank you!
  3. Hello, I'm trying to loop a "shake" animation of my drop-area as long as my droppable item is dragged. The animation should start 2sec after an item is dragged and should be repeated every 2 seconds. I found a few pens/topics but none of them could make it works. As you can see, I tried using onPress/Release, but it's still not working, and I have a shake animation after page loaded, which I don't want. Is there a way to do that ? Quentin
  4. 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
  5. Hello all, I am new around here. I am having 2 issues currently. I am trying to make my draggable boxes snap to the center of my target box. Currently they are snapping way off. lol When a new draggable box is put on the target box, i need any other box currently on the target box to move back to its original position. Thank you for your help, I really appreciate it.
  6. Drag drop does not work if the svg node under two transformed div: <div style="transform: rotate(90deg)"> <div style="transform: translate(20%, -10%) scale(1.2)"> <svg>...</svg> </div> </div> Check the codepen. The object will go up if drag it to the bottom. Test on chrome Version 65.0.3325.181 (Official Build) (64-bit) for macOS 10.13.4.
  7. Hey, i first try to explain what i want to do: i have an vertical sortable list of items where each item should be draggable after item was long pressed. if no item was long pressed, the hole list of items should be scrollable (also scroll by touch on touch devices). I listen for mouse/touch/pointer long pressed, and then i create a new Draggable, and call startDrag(e) with the event i received from my lister. With Mouse Events, all is fine, but with Touch Events, i have the problem that a pointercancel event is called after 7 or 8 pixel dragging a elem
  8. The circle move along the path with animation in this example. But how to do that with draggable plugin, drag the circle along the path.
  9. Hi, I basically modified this example "https://greensock.com/?example=sortable-grid-using-draggable" but I separated it into multiple isolated sections which can contain tiles (Each section has a bunch of tiles which can be reordered, but is independent of the other sections). It is though possible to move a tile from one section to an other. I'm checking in the "Out of bounds" part if the tile is touching an other section, and if yes, I attach it to that section. Everything is working so far, but there seems to be an issue with the relativo position of Draggable. Fr
  10. Hi, I'm using Angular UI-router to build a one-page site with a looping, draggable navigation, and want to use TimelineMax to animate a sprite on the transitions. What I've got so far (see Codepen link) is that when the user drags or swipes the target area, the animation plays or reverses (depending on swipe direction) and the new section loads. So far so good. However, I want the drag/swipe action to actually control the progress of the sprite, so that users can scrub through the timeline. Then, when they release the drag or swipe, the rest of the animation to play and the next page t
  11. Hello , I managed to find solution to drag content of TextBox up and down but its not stable . once you hold down the scroll-bar and start dragging its working but if u leave the scroll and try to do it again its not working Can i use GreenScok draggable to do that professionally ? I really feel sad i bought green-sock membership thinking that draggable will work fine but its been few days no success this is the example code i hope someone with experiance can guide me how to drag content inside Movie Clip at the stage using same concept " am using Adobe animate cc Canvas Project is
  12. Hello everyone, I'm looking for a hint, as you can see in the Codepen attached I managed to drag a masked SVG circle around the container, problem is when I want to use a path as a mask I don't know how to get the coordinates (for path there's no "cx" and "cy"). Any suggestions on how I could accomplish this? This is the function that does the trick with a circle //move the mask with the drag function onThrowUpdate() { var posX = parseInt(rocketHole.getAttribute('cx')) + this.target._gsTransform.x; var posY = parseInt(rocketHole.getAttribute('cy')) + this.target._gsTransform.y;
  13. Is it possible to target a specific tween in a timeline and not have it go in reverse when the timeline's progress is going from 1 to 0? function createTimeline(progress, ...elems) { let tl = new TimelineMax({ paused: true }); tl.add('beginning') .fromTo(elems[0], 1, { x: '-100%' }, { x: '0%', ease: Power0.easeNone }) .fromTo(elems[1], 1, { y: '100%' }, { y: '0%', ease: Power0.easeNone }, 'beginning') .add('middle') .fromTo(elems[0], 1, { x: '0%' }, { x: '100%', ease: Power0.easeNone, immediateRender: false }) .fromTo(elems[1], 1, { y: '0%' }, { y: '-10
  14. Hi, guys! I have a problem with minimumMovement parameter in Draggable. There is a site menu with several clickable links. I want to be able to drag the entire menu even if mouse cursor (or touch) is above the <a> element. But now I can drag it only if I press on empty area of the menu. You can check the actual version right here: http://nordskill.com/dock/argish/index-about-us.html But you have to squeeze the browser window to "mobile" width to see what I'm talking about. The DOM structure looks like this: <menu class="nav"> <ul> <li><a hr
  15. Hi everybody, I was wondering if it was possible - I'm sure it is actually but I don't know how exactly - to define a drop area in which draggable elements would go. I saw the "trigger" property but I don't know how to use it. For instance : I created 6 labels like so : <div class="move" id="word1">vol</div> <div class="move" id="word2">nuée</div> <div class="move" id="word3">rangée</div> <div class="move" id="word4">bande</div> <div class="move" id="word5">tas</div> <div class="move" id="word6">pile</div> I g
  16. Hello, I am working with a banner that is 970x418. I am trying to create a parallax effect on y-scroll (drag). In order to do this, I assume that: 1) I need to create a "container div" with a "foreground div" and "background div," foreground on top of the background. 2) Set the container itself to scroll/drag and affect both div's together. 3) Change the speed the background div to be a little slower, in order to give the parallax illusion. So far, I haven't found anything that shows me how to work with dragging one item and using the info of that item to affect the positioning of a
  17. I have some code that checks conditions in the onDragStart handler. I'd like to be able to cancel the drag if a set of conditions are not met. I had assumed that returning false from handler would do it, but was wrong. Is there any clean way to cancel a drag in this case?
  18. I'm interested in creating a draggable div that can be translated or rotated depending on some criteria, for example: rotate if CTRL is pressed, translate otherwise...or, translate if the mouse is clicked near the center of the object, rotate if the mouse is clicked near the edge of the object. The method I've tested involves detecting the CTRL key up/down events and killing the existing translate/rotation draggable and creating the other one. This works except that after an object that has been rotated, then translating it causes additional rotation. Any suggestions?
  19. Is it possible to ignore all events on a drag container ( type = scroll ) when I drag a nested element ( type = x,y )? When I use dragContainer[0].disable(); the container resets the position to 0,0. I tried to disable interaction with dragContainer during the onDrag event from a nested element, but no success. edit: I've added a pen. So when you drag the yellow container around you will see some images. When I drag those images (nested draggables) you will see that the container is moving as well. When you uncomment #111 & #116 you will see that the disable/enable is making trou
  20. I want Drag & Copy use GSAP Draggable solution
  21. Hi, I'd like to replicate a popular scrolling effect in mobile apps these day. When scrolling a list with a header image, overscrolling would cause the header image to grow in relation to your overscroll amount. I listened to the 'onDrag' event, and then query the 'y' property of the Draggable instance. It seems that the reported value does not take overscroll into account. I patched the Draggable source to enable this (detail below), but I am wondering, is there's a proper/native way of doing this? This is my patch to Draggable.js: //pass instance to scroll proxy object so w
  22. Hello, is it possible to make a ios like drag menu, where I can "throw" the menu open? Maybe with throwProps plugin or so... I don't know, I am new to GSAP I mean something like you can see here: https://www.youtube.com/watch?v=hbuL-vUDBhg&feature=youtu.be&t=32s What I mean happens at 32s I've already tried it out as you can see in the codepen example. Greetings, luneyard
  23. Hello, I was wondering how could I limit a draggable movement only diagonally towards top-left and bottom-right. Thanks guys!
  24. Check out the Codepen and you'll notice that you're able to drag the octopus to the left a bit before the bounds stop you from going further. You can't go to the right at all. After you let go, you'd expect to be able to drag it to the right (back to where it started), but it seems as though the bounds reset based on the image's relative position. When you drag it, you can't go to the right, but you can go further to the left than you originally could. Thanks for your help!
  25. nexie

    drag and emitter...

    Hello, This is what i want to achieve: the user should tap the object, and on drag, the behind object should emit some particles (let's say 25) and after emmision to load another canvas over it. How doable is it? Can you point me in the right direction on what do i need to use? I will add a codepen as soon i get pointed into some direction on what libraries should i use or if you have any examples i can inspire from, even better! Nexie
×