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
  • 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. GreenSock

    Draggable

    #container { margin:0; padding:0; font-family: Signika Negative, Asap, sans-serif; font-weight: 300; font-size: 17px; line-height: 150%; } #container h1 { font-family: Signika Negative, Asap, sans-serif; font-weight: 300; font-size: 48px; margin: 10px 0 0 0; padding: 0; line-height: 115%; text-shadow: 1px 1px 0 white; } #container h2 { font-family: Signika Negative, Asap, sans-serif; font-weight: normal; font-size:30px; color: #111; margin: 18px 0 0 0; padding: 0; line-height:115%; } #container p { line-height: 150%; color
  2. 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?
  3. Hi friends! Please tell me does anyone have an idea how can I implement this scroll effect by using GSAP and locomotive-scroll? EXEMPLE https://www.designembraced.com/ CODEPEN: https://codepen.io/ClementRoche/pen/YmVNEx Thank you guys
  4. Hi All, My question is when the slider is mid drag and you press one of the next or previous buttons. The slider jerks for a second if the drag isn't completed. I think this is due to: gsap.killTweensOf(slider); Is there a better way to strop the current drag and switch it to a different tween on click of the next and previous arrows?
  5. 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
  6. 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.
  7. 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!
  8. Hey. I lost a lot of time trying to implement a similar ticker with the ability to pull it along the x-axis. I found you have an example that almost suits me, but I can’t get to ask him a new position when I release the ticker and keep it playing
  9. 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
  10. 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
  11. 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!
  12. 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
  13. 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.
  14. 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.
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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;
  20. 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
  21. 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
  22. 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
  23. 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
  24. 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?
  25. 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?
×