Jump to content
GreenSock

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

Search the Community

Showing results for tags 'drag'.



More search options

  • 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

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


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 33 results

  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 hearthstone achieved, a very smooth movement which depends on the position of the mouse-center of the card, as implemented here by @dstnation. We do handle the smooth transition of the card from its position to the mouse cursor by using just one line of code on the 'onEnter' function, basically: protected function onEnterFrame(e:Event):void { if(mMouseTarget && mMouseDown) { //Handle the position of the card 'x' and 'y' TweenLite.to(this, 0.2, {x:mMouseTarget.x, y:mMouseTarget.y}); } } mMouseTarget's position is filled on the onMouseDown, along with the mMouseDown variable. We are nevertheless, having a hard time trying to figure out how to do something similar with the rotationX, rotationY and (perhaps?) skewX/skewY to achieve a 3D effect? Does anyone have any idea on what could we try? Thanks beforehand
  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 before. Does anyone knows this behavior and has some hint for me? Thanks in advance!
  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 element in one direction and the dragging abort. Please see my codepen, hold press and drag the red item. you have to use a touch device, or set force touch sensor in chrome devtools. Has someone an idea? Best Regards Chris
  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. From what I've seen Draggable uses relative translateX and translateY CSS styles to move arround the elements, but when I move my element to an other section, the div element is attached to the new section, and the tile still has the old translateX value, and therefore drifts away from the cursor as the element is positioned in some other place. Is there any way to reset the dragged element position to be relative to the new position in the DOM, and stay under the cursor? Greetings and thanks.
  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 to load. Another thing I've noticed is that once I've swiped through all section of the page and looped back the beginning, the sprite no longer animates - the Timeline just jumps to the next sprite image. If you change direction it then starts working again. Any help greatly appreciated! NB: The individual page content won't load on the Codepen demo, not sure why, but it doesn't matter to the issue I'm trying to resolve here. Cheers.
  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 attached . --- tl = this; createjs.Touch.enable(tl); linesOfTextF(200); function linesOfTextF(n){ for(var i=0;i<n;i++){ tl.TextBox.text += 'this is line '+i+'\n'; } } paramF(0, 48, 146-20 , 48+146-tl.TextBox.getBounds().height); function paramF(x1,y1,x2,y2){ tl.m = (y1-y2)/(x1-x2); tl.b = y1-tl.m*x1; } //this tl.sb.thumb.addEventListener('mousedown',startdragF); function startdragF(e){ stage.addEventListener('stagemousemove',dragF); stage.addEventListener('stagemouseup',stopdragF); } function stopdragF(e){ stage.removeEventListener('stagemousemove',dragF); } function dragF(e){ if(e.stageY>=48 && e.stageY<=48+146-20){ tl.sb.thumb.y=Math.floor(e.stageY-tl.sb.y); tl.TextBox.y = Math.floor(tl.m*tl.sb.thumb.y+tl.; } } --- Thanks test2.zip
  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; TweenMax.set(rocketMask, { attr: { cx: posX, cy: posY } }) http://codepen.io/Polenji86/pen/KNeZOE
  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: '-100%', ease: Power0.easeNone, immediateRender: false }, 'middle') .add('end') .progress(progress); return tl; } I am using a dragging/swiping callback to control the progress of my timelines, but I'd like to, regardless of the direction of the progress, have the tweens associated with elems[1] to always go from y:'100%' -> y:'0%' -> y:'-100%'. Right now, if the progress is going from 1 to 0, the tweens associated with elems[1] go from y:'-100%' -> y:'0%' -> y:'100%', which makes sense, but it's not what I'm looking for. I can make a CodePen if that would help. Thank you! EDIT Heres a CodePen: http://codepen.io/TrevorRice/pen/YGbyvv/?editors=1010
  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 href="#">btn name</a></li> <li><a href="#">btn name</a></li> <li><a href="#">btn name</a></li> <li><a href="#">btn name</a></li> </ul> </menu> JS: Draggable.create(".nav", {type:"x", edgeResistance:0.75, throwProps:true, minimumMovement:2, bounds:window});
  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 give them draggable properties : Draggable.create(".move", { cursor: "-webkit-grab", onDragStart:function(){ TweenLite.set(".move",{cursor:"-webkit-grabbing", opacity:0.6}); }, onDragEnd:function(){ TweenLite.set(".move",{opacity:1}); } }); And now, I would like them to be dropped (not everywhere on the page but) only in a drop area like a <span> : <div class="exercice">Un(e) <span class="DropArea">............................</span> de cailloux</div> How can I reach this result ? Thank you for your consideration.
  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 another. I've seen sites that give code libraries like scrollMagic, but they are not easy when it comes to finding out how to do specific things, only what is shown in their examples. Please help.
  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 trouble somehow.
  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 we can dispatch event and append overscroll information 677-ish: ScrollProxy = function(instance, element, vars) { //now when instantiating scrollProxy, pass reference to self 1824-ish: scrollProxy = this.scrollProxy = new ScrollProxy(self, target, ... //line 752-ish right after if (offsetLeft || oldOffset) { .. }, append offset info and dispatch a new overscroll event instance.offsetLeft = offsetLeft; _dispatchEvent(instance,"overscroll","onOverscroll"); //line 785-ish right after if (offsetTop || oldOffset) { ... }, append offset info and dispatch a new overscroll event instance.offsetTop = offsetTop; _dispatchEvent(instance,"overscroll","onOverscroll"); So now in my onOverscroll handler I do something like: var offset = myDraggableInstance[0].offsetTop; var headerScale = 1 + ((offset / 120) * .5); //scale the header up to 1.5x when overscroll is between 0-120px Thanks!
  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
×