RedGlove

Really nice Jack! I updated the Draggable used at the very first example in my question to use the link you've posted and I am getting the functionality I was looking for on mobile phones too. And of course the flexibility of having it as an option it's just why we love GSAP! Greensock style support!! Go greensock!!

Well I think that as long as the option is available, then the default behaviour shouldn't really matter (a lot) for devs!

Ah yeah I can see it too. So if I understand correctly this acts as a blocker for the default right click behaviour on the draggable on mobile?

I really need to practice my communication skills! But yes this is what I mean!

I have an inactive draggable. I tap/click on it for 3 seconds it should get enabled for dragging. I tap/click on it for 4seconds when is enabled and gets disabled. This is all that should happen. But focus on example 2 which the only thing that does is to disable the draggable if you pressed it for 4 seconds. And again as I mentioned the part that doesnt work is the part of disabling the draggable on mobile when there is no dragging involved in the gesture. Other cases work. use case 1: -Draggable is active Basically tap on the draggable for 4sec, even 10, while is activated (which is the deafult state) on example 2 without dragging anywhere. This should disable it. But in fact because an onRelease event is fired without actually releasing the draggable then the timeout gets cleared from the onRelease function defined which clears the timeout. use case 2: -Draggable is active But if I drag and hold for 4 sec the draggable will get disabled which is great. Why can't I get use case 1 to have the same behaviour as use case 2. This is tested on my android not just the simulator.

Another more simplified example without even timers. Just console logs. Tap and keep tapping on the draggable. A release will be fired without releasing. -Again desktop is fine, chrome on mobile (android) or the chrome simulator fires release without untapping. http://codepen.io/RedGlove/pen/GmdwBN

Thanks for the quick reply @OSUblake! Very interesting read. Especially for device support! Will definitely consider adding pointer event support once I get it to work! The thing is though, the issue is not related with my event handlers. I created a second version of my pen where I removed all listener handling I do myself, and just created the draggable which means draggable is now responsible for event handling on that element. In this scenario the draggable is enabled by default. All I do, is start a setTimeout at the onPress event of the draggable so that if 4 seconds passed it will disable. Then with onRelease I clear the timeout so that the above requires a continuous 4sec tap to run. If I tap the draggable and keep pressing without any dragging, onRelease will fire regardless of whether I untapped or not (unwanted behaviour onRelease shouldn't fire at all). If I drag the draggable, and keep holding onRelease will fire only after I actually release the draggable (this is expected). Thanks! forgot the link!! http://codepen.io/RedGlove/pen/QvrJjv?editors=1010

Hello fellow greensockers, I hope every one is well! Draggable issue, I have a div on which I set a 3sec timer on "mousedown" or "touchstart" to enable draggable functionality. On "mouseup" or "touchend" I clear the timer which doesn't let it enable the draggable when the mouse is realeased before 3 secs. If draggable is activated I drop my listeners and work with draggable's listeners. The same logic applies to disable back the draggable in it's onPress and on Release events but this time for 4 secs. Everything works on desktop chrome. On mobile though If i just tap and hold my draggable the onRelease event gets fired without even untapping resulting in the draggable not being able to deactivate. If i tap and drag (so that is calculated as drag event) then onRelease fires correctly at the time the element is actually released, unless if the draggable stays tapped which will disabled it (as expected). The think is draggable doesn't disable from a single long tap without dragging on mobile, because without dragging the onRelease fires at a wrong time. I tried setting minimumMovement to 0 just to check if in that case all clicks are interpreted as drag - to force a drag before release (since it works after a drag) but still no luck. I also tried using onClick, but onRelease fires earlier on a single tap and when the element stays tapped for a long time no onClick is fired. This behaviour can be tested on chrome dev tools mobile simulator too. As usual codepen demo linked! http://codepen.io/RedGlove/pen/pPVZgd Any help will be appreciated! Thanks!

I don't really know what's wrong with using backgroundSize. It may not be supported on Safari for the ios you are testing on. You can achieve the same effect that works on ios by adding your image in another container with overflow set to hidden, then position your image at top 0 and left 0, and then in your TweenMax increase width and height to 125% which gives the same effect. Take a look at this codepen: http://codepen.io/RedGlove/pen/EygZLX?editors=1111

No worries man!

(please correct if I am wrong!!!) Indeed it does but it doesn't change the line count because as you said its just CSS. In fact if you remove all the javascript and the CSS rule that you added from the pen you will get the same effect. I assumed that the line count may be needed for some kind of animation or something and if so, I guess the text needs to be separated and recalculated at every resize event. Then again if the line count is not needed and no animation is involved as you said the whole thing can probably be achieved by some "responsive" CSS. Aaahh speculations. You said it right Jonathan: "Can you please provide a codepen demo so we can see your code live and in context to better help you?"

I haven't use SplitText before so my suggestion is based on the 8 min video from the site..so don't judge me if I am wrong.. From what I understand what you need is to call the SplitText whenever a resize event fires. Take a look at this pen: http://codepen.io/RedGlove/pen/bedqvz?editors=1111 Remember to turn on the console in codepen to see the outputs and start resizing. P.S.: I am not sure why, but the array created from SplitText includes an empty div at index=0. So if there are 5 actual lines, lines.length will be 6.

To loose the horizontal scroll-bar insted of var w = window.innerWidth; use var w = document.body.clientWidth; to get the width minus the scroll-bar. Keep in mind that this won't work if you set the width of the body element. http://codepen.io/RedGlove/pen/LZPLYZ?editors=1111

Based on PointC's pen, for a no-Jquey solution you can also try the global event handler window.onresize = sizeAll; or attaching an event listener: window.addEventListener("resize", sizeAll); which are the same but have different usage. Event listeners can be used for attaching multiple functions on the same event handler. Note: The addEventListener() method is not supported in Internet Explorer 8 and earlier versions. (as copied from: http://www.w3schools.com/jsref/event_onresize.asp )

Thanks for the reply ohem. I finally managed to solve my issue. As I mentioned in my post I tried using window.addEventListener("load", animation.start()); which has the same effect as what you suggested window.onload = function(){ tl.play(); } and I tried them both and they didn't seem to work. What I had to do was to add the onload event handler on each individual image of my animation and increment a custom counter for each event triggered. And when the counter reaches the number of expected images on page then call gsap functions. Something like this: var imageCount = 0; for(var i=0; i<images.length; i++){ var displayElement = document.createElement("img"); displayElement.onload = updateCounter; displayElement.setAttribute("src", images[i].src); } function updateCounter(){ imageCount++; if(imageCount==images.length){ tl.play(); } } So essentially my problem was related with synchronization. My javascript was injecting the image nodes, the request was sent to download the images from the html side of things but javascript was still running in the background reaching the animation point and while content was still downloading elements were starting to animate. Now the animation starts when all events are fired from each individual image.