Search the Community
Showing results for tags 'touch'.
Found 16 results
-
Hello, I am using the GSAP Observer like this: Observer.create({ target: window, type: "wheel,touch", onUp: () => { maskTimeline.reverse(); }, onDown: () => { maskTimeline.play(); }, onChange: (self) => { totalScroll += self.deltaY; scrollPercentage = totalScroll / $(window).height(); if (scrollPercentage < 0) { totalScroll = 0 scrollPercentage = 0; } else if (scrollPercentage > 1) { totalScroll = $(window).height(); scrollPercentage = 1; } } }); The issue is that I also want it to work when someone drags on a touchscreen monitor. I know I could also use type pointer but I want it to activate only when swipe/drag is detected
-
Hey there, I'd like to move an element horizontally using wheel and/or drag on desktop and touch and/scroll on mobile. I've set up Draggable for easiest possible scrolling with inertia, and Observer for wheel events. I can sort of update a target value for the element to tween to, but the back-and-forth of the respective x values won't quite work. Any tips? Best regards Constantin
-
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 drag at the moment, so the client wants to add multi-touch compatibility to dragging. I know of hammer however everything is already written using draggable (I'm already using Hammer for swiping on different elements in a different manner), and I really like the smoothness of draggable. In order to use hammer I'd have to rewrite draggable's throwprops which I'd rather not have to do. Is there a way to allow multi finger touch or has that not been added? Thanks!
-
Having problems with touch on some projects that are using Draggable I am now diving into this. I'm having problems with touch on both rotating draggables as well as translating draggables on several browsers, but Firefox seems to be the most problematic one. This thread though is about a particular draggable issue that only seem to affect Firefox, while other browsers seem to work fine: The codepen included here is, as you can see, as easy as it can get. A svg circle where Draggable is put on with inertia and rotation. Touch in this example is running fine in browsers like Chrome and Ms Edge (chromium based browsers), but touch is not working at all in Firefox (Windows) here. In the codepen I used the actual gsap template from this forum, which is still using version 3.2.3, but I've also seen this beviour in version 3.2.4 locally here. [edit] the touchstart seem to be triggering something in draggable though, because when just moving the mouse after trying to drag with touch, the object gets dragged, eventhough none of the mousebuttons are pressed. Also this issue occurs with Draggable type set to 'x,y' as well as set to 'rotation'
-
I don't find an example from the draggable knob that does following (based on my codepen live example): - knob is on position 15 percent - I tap (touch) on position 70 percent - knob moves to position 70 percent It is only possible to tap and move (drag) to that position. I don't find anything in your docu. A "simple" answer from you will be "tap or touch" is not "drag". But this doesn't help me. A link that explains what I want. https://radmie.github.io/ng-knob/ My link to my codepen live example. I want only show the missed functionality (compared to the upper example, based on ng-knob). For a review it's to complex. But interesting for you. Hopefully. When you want play with different predefined variants than change line 20 in "JS". https://codepen.io/TirochH/pen/eGqbNL Here a link from a "simple" example from "Greensock" with the same missed functionality (with rotation angle, instead percentage). https://codepen.io/PointC/pen/eWNRpe Hans
-
Hello, I want to know are there ways to do something similar to this (url below), i wish to use greensock as it need to be on touch device. http://subprotocol.com/system/tree.html Things i want to mimic is dragging the "green leaves" which will also pull the rest(other leaves and branches) along with it, the branches have this pull effect. - if yes, then where should i look at. - if no, can you suggest where else can i look at, definitely not verletjs. and then when u release, the "greens" bounce back to where it is (which i think can be done like https://greensock.com/draggable) thank you!
-
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
-
Hi, I had created a infinite slider using GSAP which you can drag as well. Just today I noticed that even if I keep holding the slide, the onRelease event fires in draggable on touch devices while on desktop it works fine. I guess that's intentional behavior? How can I change it to stop autoplay if user isn't swiping?
-
Hello, After looking online and on this forum, I create this new post to see if anyone had the same issue with GSAP Draggable. As you can see on the screenshot below, I use a Draggable instance with type: x to create a main horizontal scrollview. Inside this scrollview, there are several boxes which all have a vertical native scrollview, using css properties : overflow-y: scroll; -webkit-overflow-scrolling: touch; It seems there is a conflict between horizontal Draggable events and native browser scroll when this scroll applies inside Draggable element. It is not possible to drag the mainview if the touch event is fired inside the native scrollview; only native vertical scroll is working. (if you drag on the header, which have no scroll, Draggable horizontal scroll works, but if you try to drag horizontally on the grey block, no horizontal scroll occured) - The issue occured on touch devices : Chrome Android, Firefox. The issue can be reproduced on latest Chrome Desktop with Touch simulated - It works on Safari iOS devices (iOS9, 10+) You can reproduce the issue on the codepen below; You will need to simulate touch events to reproduce. I tried to enable/disable "allowNativeTouchScrolling" but the issue is the same. Do you have any idea how to fix that ? The only solution should be to apply a Draggable instance to replace each native scrollviews, but may have performance issues on low Android devices. Thanks for your help. -
Dear Community I am new in webdevelopment. So I started my first cordova project. In the codepen-example you can see my code. It works well on desktop browsers. But when I test my code on an mobilephone the img #main-menue-knob can't get dragged. Is there any eventlistener that I have to add, that the drag-function works on a touchevent? Thanks for support Tupic
-
On Chrome, when a touchevent occurs, the pageX/Y values are set to 0. This means that hitTest won't work when passing in the touch events... I'm not sure if this is something easy to handle inside Draggable, but I thought I would post it to see if anyone has any thoughts, and if not at least let others know and show my workaround. For now I am doing a workaround to make my own point to pass in to Draggable.hitTest(), like so: // e is my event var point = e; if(e.pageX === 0 && e.pageY === 0 && e.changedTouches) { x = e.changedTouches[0].pageX; y = e.changedTouches[0].pageY; point = { left: x, right: x+1, top: y, top: y+1 }; } var hit = Draggable.hitTest(element, point); This is a related investigation to a thread I started at http://greensock.com/forums/topic/12189-draggablehittest-in-a-scrolled-window/, but seemed like a separate topic, so I started a new thread.
-
I am using a Windows 8.1 hybrid device and IE 11. If I create a Draggable with type:'x', it doesn't work. I created a CodePen to demonstrate this. I have to touch and drag about 3 times before it works. It works fine with a mouse.
-
Hi All, I have a site where I have a horizontally styles un-ordered list (<ul>), my site dynamically adds items to the list based on user interactions. For each new item in the list, I have applied a Draggable.create call to make them draggable in the Y axis (vertical), I also apply an animation Tween on the item so it bounces into place. This all works fine! Im using this code for that: //add to the UL $(".cardList").prepend(newDiv); //animate the card into place TweenLite.from(newDiv, 0.5, { y: -250, ease: Elastic.easeOut }); Draggable.create(newDiv, { type: "y", onDrag: function () { //my code... }, onDragEnd: function () { //my code... } }); However, when there are a lot of items in the list, I would like to scroll the list horizontally, so I wrapped up my list into a DIV container and called: var scroller = new Draggable("#cardsContainer", { type: "scrollLeft", edgeResistance: 1.0 }); ...which 'kind of' works. I currently have 2 issues: 1) I can add a new item into the list and I can see that the scrollbar on the scroller increases, but from time to time, the scroller "snaps back" prematurely, so effectively you can never scroll to the end of the list. It simply stops scrolling, it looks like the animation I am using to add the new items to the list could have some effect on the calculation of the width of the scroller? 2) When I click and drag the scroller (when it does work), the items in the list which can scroll vertically move slightly up/down, can I have some kind of check to see if the user is scrolling left/right and NOT enable the vertical scroller based on some threshold? I hope that makes sense
-
Hi everyone, its been a few days since I found out and started using gsap js and must admit its an awesome framework. I make native games for iOS and now I evaluate gsap for html 5 cross platform 2d game development. I have a strange performance issue regarding the Draggable utility on iOS devices (maybe on other platforms too but I have not tested any other device). When the user moves the draggable element around with his finger I observe high CPU usage (55-65% on an iPhone 3GS) while when the user is not interracting with the element the CPU usage is 25-35%. I downloaded an updated version of Draggable from here but there was no difference. I am at your disposal for further info and testing!
-
I want to create somthing similar to the (Flash) Throw Slider: http://www.leebrimelow.com/?p=422 Anybody done anything like this with gsap? What touch libraries do you recommend?
-
Hello, I´m trying to make a simple pinch zoom image scroll app in Adobe Air Mobile for Android and ios. I always having the same issue when I try to pinch the image zoom in and I activate the blitmask. I don´t have problems making this part. But when I pinch to zoom out, the image moves to different x and y coordinates, and sometimes the image disappears. IThe image upon zoom out moves off-center and doesn´t return to position zero. I know there is something in the blitmask that changes these values, but I´m not sure what exactly is going wrong. I always use blitmask.update() and enable or disable bitmapMode. Does anyone have an example for Flash with pinch zoom gestures with ThrowProps + blitMask? Thanks.
