x0b

I've done a factory reset from the settings which has wiped all data, the superuser app remains on there but all others are gone. The stock browser still exhibits the problem. I am happy to remove root access and restore the phone to another firmware, I will try and find out how to do this tomorrow and then report back once done.

Hi, It's fine on Chrome and Firefox latest versions, sorry I forgot to mention that!

Something called superuser, I did it a long time ago and don't really know anything about Android so I can't be more helpful than that I'm afraid!

Hi Jonathan, It's Android 4.1.2, it's been rooted so I could upgrade to this firmware. http://www.greensock.com/draggable/ If you could test the above throw demo on your S2 and see if it's ok in the stock browser that would be appreciated. Thanks

Hi, I'm testing out the draggable demos from this site on a Samsung Galaxy S2 GT-I9100 Android version 4.1.2 in the stock browser and I cannot actually drag anything, the draggable item moves to the correct place upon drag ending but does not move around whilst being dragged. Are you aware of this problem and do you know if it's fixable? Cheers

Hi, I'm using scrollTop on a div and would like the native scroll bar to show on mobile. It does on the desktop and Chrome on Android 4.1.2 but doesn't on iOS 7.1.1 on iPhone 4S in either Safari or Chrome. I have set -webkit-overflow-scrolling:touch in the css but it's not helping. Any ideas? Thanks

Hi, I've managed to get it working exactly as required. http://codepen.io/x0b/pen/qmGis When not dragging I set the draggables to dragResistance 1 so they can't be dragged. Then as soon as a touch is registered I start to record the direction the drag is going whilst touchmove fires and then change the dragResistance of the desired draggable to suit, then reset all dragResistance settings back to 1 when the touchend event fires. I could probably optimise this more by just using draggables built in drag events but I'm very happy with how it works and I don't get any stuttering like I did when using enable() and disable(). Cheers!

Hi, Further to this discussion, I'm having some issues with the performance of disabling draggable instances, the site I am making will be for smart phones and I am seeing slowdown and performance problems when testing on iPhone 4S iOS 7.1.1 (it's worse with other less powerful phones). My setup is similar to Webls, I have a main container that has draggable scrollTop on it and inside that I have many elements with draggable x set on them. Here is a codepen to demonstrate : http://codepen.io/x0b/pen/gbBcu You'll notice that when dragging vertically you can also drag the horizontal draggables and vice-versa. Although it works pretty smoothly, this is unwanted behaviour as I want to either drag vertically or drag one of the horizontal draggables on it's own. The following app exhibits the exact behaviour I want to recreate, I think it works very smoothly and is a great UX, to be able to recreate it with Greensockk would be amazing! https://itunes.apple.com/gb/app/bbc-news/id377382255?mt=8 So, this code pen demonstrates the desired relationship between vertical and horizontal: http://codepen.io/x0b/pen/pcgEm The problem now is performance, when i flick one of the horizontal rows I get a stutter where it is disabling the vertical drag. It's also very hard to do a horizontal drag every time because the threshold between a horizontal gesture and vertical gesture is so close. This is also apparent when trying to drag vertically when touching on one of the rows. I wonder if you have any ideas about how I can overcome this performance problem? It seems disabling and/or enabling a draggable instance uses up enough juice to causes jerky animations. I'm not sure what goes on under the hood but maybe there is a way to do a lighter version of disable/enable that won't cause glitches? Even if there was a way of adjusting the '3px' click threshold to be a higher value, that might help? I've also tried setting the dragResistance to 1 in the hope it would disable in a 'light' way but that didn't work out well, although that approach seems like it could be good...

Hi, Yeah I too am not a fan of custom ones. I'll do some more testing and see whether the slight performance trade off warrants one or not. Thanks a lot for everyones help

Hi, Thanks for the replies. I'd like the performance of a Y transform compared to scrollTop but I also definitely want the scroll bar to show the user where they are on the page. What would you suggest is the best way of accomplishing this? A custom scroll bar? Thanks

Hi Rodrigo, Thanks for the answer, you're right - it makes sense to use a wrapper div instead of the body. Is there a way to show a native scroll bar when dragging? Thanks Edit : I realised using scrollTop instead of y means a scroll bar is shown, this also seems to make the animation quite jerky - is there something I need to change here or is scrollTop animation not as smooth as y animation?

I'm a bit stuck due to the limitations of not getting a scroll event fire when scrolling the body on touch devices, can Draggable overcome this? I was thinking it may be possible to use Draggable on the body element and turn off native scrolling, therefore simulating natural scrolling and also enabling any desired updates whilst Draggable is doing its thing... Am I barking up the wrong tree?

Hi Carl, Thanks, I tried the above syntax but it didn't work. I now realise from your Codepen that appending [0] to the draggable instance var is what I needed to do to access the vars. Thanks a lot

Is it possible to update the snap array on a draggable instance to something else after creation? Say I have the snap values set to an array, but then later some values in that array change, can I change the old snap array to the new array, therefore updating the snap values? Thanks

Hi Carl, Thanks so much, the last solution is working perfectly As advised I added in a bit to record the progress prior to reinitialising the tween and then setting it immediately afterwards so the element tween was in the same place, and now it works exactly as I needed. I did have a quick fiddle with percentage based positioning, would this eradicate the need to reinitialise the tween or would I still need to follow that process? This element is the only one in the site that reacts to the browser size, everything else is contained in a fixed width div so I haven't needed to use percentages previously. Once again thanks so much!

Hi Carl, Thanks for taking the time to help on this. This tween is one tween in a pretty huge timeline that contains other timelines. I'm controlling the playhead using the scroll position of the window and the user can go forwards and backwards at any time. I should have been clearer with this I'm sorry. I don't want to force the user to go all the way back to the start of the main timeline if they adjust the window size. Your demo works fine for restarting the tween, but if I change the restart to reverse (I can't fork your Codepen for some reason) , it obviously breaks because the values have been cleared and invalidated. The likelihood of the user scrubbing back over the timeline to the point where this tween occurs after adjusting the size of the window is minimal, but this is the sort of thing my client is likely to do! So I guess what I really need to do it somehow adjust the existing tween values upon window resize so the tween will look correct when it is scrubbed over again instead of jumping to the old stored values.

Unfortunately I can't as it's part of a timeline that can be scrubbed backwards and forwards. I don't think I'd be able to regenerate it without causing lots of other problems.

I have an absolutely positioned element that is animated to a position at the bottom right of the browser where it should stay. This works fine but I am running into a problem when the browser is resized, the end position is recorded at the old bottom right position and I need the element to go to the bottom right of the browser as it is after the resize. Here is a codepen to demo what I mean. If you run the tween, then resize the stage area and then restart the tween you'll see that the box doesnt animate to the bottom right of the browser as required, but instead to the old bottom right position. http://codepen.io/anon/pen/jdqkt I guess what I need is to somehow update the tween on that part of the timeline when the browser is resized, but I don't know how or if this is even possible. Any help would be greatly appreciated! Thanks!

I've been doing some experimenting with using the tick event rather than scroll event due to the performance boosts mentioned above. I've discovered some interesting things which I'd like some opinions on if possible? http://codepen.io/x0b/full/Ejqhl The code pen above demonstrates using the tick event, the page scroll position is linked to the timeline time and once the page is automatically scrolled to the bottom using the scrollTO plugin the timeline 'onComplete' should fire. For convenience I've added some outputs at the bottom, you can see what time in seconds the timeline should be tweening to on the right, but it never gets there as you can see by the timeline's current time output on the left. http://codepen.io/x0b/full/Efjxp This next code pen uses the scroll event instead of the tick (the only difference) and works as intended. Any ideas why the timeline tween can never get to the end in the first version? Surely the tween should still get to the required position? Incidentally, if you run the second scroll event version in the 'edit' mode on codepen, it sometimes doesn't complete. I am not sure why this is either. Any help greatly appreciated

I'm having the same problem but I am only using GSAP for tweening. Everything works as it should in every browser except Safari (I'm on Version 6.1.1 (8537.73.11) - OSX 10.8.5) where it will randomly sometimes not complete the tween on the window scrollTo. I don't have this problem with the simple demo linked above, but my timeline is a lot longer and more complicated than that. I'm happy to provide access to my site for debugging purposes, I'll try and find the time to put a codepen together if this isn't enough though. EDIT : Just been doing some testing and have found that if I have the developer console open in Safari then it makes the scrollTo animation stop prematurely many more times and after a much shorter time.

So I resolved the issue. I ended up using an amalgamation of both of your solutions. Instead of relying on 'from' to position everything off screen initially, I wrapped all of the sections elements in a div and set that to display : none, removed the 'from' tweens and used 'set' and 'to' in it's place. Then every time I needed a fresh timeline I got a new instance returned from a function, and then using 'onStart' I set the container div to display : block. This works well, it's a bit more code than I wanted to write but at this stage I'm past caring! Thanks a lot for the pointers.

Thanks for the replies! I've tried both your solutions, unfortunately I use a LOT of from tweens and initialise them with a dynamically created off screen position. Because the from tween sets the position when they are created, this means all these elements start off screen as required. I do this so it is easier for me to line everything up visually in the css at the design stage rather than put them off screen in the css (with a guessed off screen position) and then tween them to their correct position in the js file, that seems like a lot more clunky method and I guess rhernando's solution was in a similar vein to this. If I use either of your suggestions then seemingly I cannot use from tweens, Carl's seems like it should work but unfortunately it doesn't, see here - http://jsfiddle.net/x0b/UsvcL/18/

Thanks a lot, that clears things up.

Hi, Firstly, let me say a huge thanks to Greensock for providing such amazing tools over the years, I've been using your products since AS2 Tweenlite and they never fail to amaze me with their power and usability...thank you!! I have made a simple fiddle to demo the problem here : http://jsfiddle.net/x0b/cXR7L My situation is this: I want to have a main timeline that has 3 sections - an intro, a changeable middle section and an outro, in that order. Once the user has completed the middle section and the outro, they click a button and a new middle section replaces the current one, the rest remains the same. Once the button is clicked I pause(0) both the outro and middle section to reset their tweens, then kill them both so they get removed from the main timeline (incidentally - remove does not seem to do anything for me as the duration of the main timeline remains the same if I check it after doing remove - is this a correct behaviour?). Then I add the new middle section and the outro back to the timeline. The timeline is controlled by scrolling the output window and runs correctly initially; the green box moves down (intro) the blue box goes left 100px further than the yelow (middle section) and then they come back to their starting positions whilst the red box comes from 1000px to cover the green box (outro). The problems once the button is clicked are two fold 1) The intro runs ok, the new middle section runs ok, but then as soon as the timeline enters the outro, the blue box jumps out to 200px and the yellow box jumps to 100px. I guess this is because the outro tween has for some reason stored these values the first time it is run, even though it was killed. 2) If I invalidate() the outro timeline, the blue box glitch disappears but then the from tween does not work correctly, I presume this is because the invalidate means the timeline has forgotten where the from tween started from? So I'm kind of stuck between two problems and not sure whether I'm using the API wrong or the API can't do what I need. Can anyone please provide some insight? Thanks!

Hi, sorry I forgot to save the codepen, they should be different now!