annam

Hello, we have an issue with draggable - we need to manually change the draggable item's position, but even after calling the 'update' function to update the position as stored in the GS draggable object, that position is not updated. Due to this, when then starting to drag, the draggable item snaps back to its previous position, as if the manual update never happened. Check out this jsfiddle that replicates this: http://jsfiddle.net/annam/3ek4nom7/ Click on the slider bar to move the slider button, and then try to drag. The button will snap back to 0. We've tried to use both 'transform: translate3d()' and 'left' to manually change the position. Neither works, even after Draggable.update(). are we misusing Draggable and the 'update' function or is the update function not working as expected? Thanks! Anna

Hi Rodrigo, thanks for your reply. I guess I'll have to use the functions method. Regards, Anna

Thanks so much! We are already in the testing phase, it looks great and the optimisations are noticeable great job once again!

Hello, I'm not sure if this is something obvious that I'm missing, I think that's a big possibility that that's the case I want to pre-define some tweens, to trigger later on on any element. So I want to create a new TimelineMax() instance and define the transition to occur, eg in a fromTo manner, I'll probably to add some sequential tweens, with an onComplete function etc. I want to do this on page load. Then at an undefined moment in the app, via user interaction, I'd like to run this already defined tween on an element. Is this possible? I guess I could do something simpler than this by simply having the options json object predefined and using it in a TimelineMax() instance in real time, but this will make it very complex to add sequential tweens or functions etc. As a bonus, if the above is possible, would I also be able to override some of the properties on the predefined transition? eg the easing? Thanks! Anna

Hi Carl, this looks great! I've just tested on the two Androids (Galaxy S2, Android 4.1.2: Internet browser and Nexus 5, Android 4.4.3: Chrome) and it works perfectly on both! Thank you both for your replies and for troubleshooting this issue. Looking forward to the update! Anna

Hi Jonathan, as I said I moved the code off jsfiddle to a static html page anyway for easier testing. Nevertheless I just checked the codepen link you sent on the iPhone in both Safari and Chrome and the results were the same - label 1 is unclickable. Actually while testing I noticed that if you click on the first label while the page is still being loaded (before greensock has time to initialize) the label is clickable but once greensock initialises the label becomes unclickable (does not change from red to green and back). Could you please try testing this again? Thanks, Anna

Hi Jonathan, that's strange.. I've just tested on three devices: iPhone 4S, iOS 7 (not jailbroken): Chrome and Safari Galaxy S2, Android 4.1.2: Internet browser and Chrome Nexus 5, Android 4.4.3: Chrome The issue is consistent on all devices and browsers - label 1 is not clickable, label 2 is clickable. It's true that the label hack is buggy on mobile browsers (even though it's completely valid css) but since label 2 works fine I think it's safe to assume that the label hack works on these devices.. The only difference between the working and the non-working label is the data-clickable attribute. I also tried changing display: none to opacity: 0 on the checkbox but the issue persists.. Here's the full code of the page I'm testing on, I had to move it off jsfiddle for easier testing: <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.8/TweenLite.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.8/plugins/CSSPlugin.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.8/utils/Draggable.min.js"></script> <div id="todrag"> <input type="checkbox" id="check" /> <label for="check">1</label> <input type="checkbox" id="check2" /> <label for="check2" data-clickable=true>2</label> <textarea></textarea> </div> <style> #todrag { width: 300px; height: 300px; background: #eee; } input { display: none; } label { display: inline-block; width: 100px; height: 100px; background: red; } input:checked + label { background: green; } textarea { width: 100px; height: 100px; } </style> <script type="text/javascript"> Draggable.create('#todrag') </script>

Hi guys, any thoughts on this? Thanks! Anna

Hello, We've noticed a problem with <label> components inside draggable components on mobile devices - they don't get clicked, so when they are connected to checkboxes or radio inputs using <label for="checkboxid"> the checkbox state does not change. we use the input:checked + label hack to style checkboxes and other elements that have active/inactive state so we need the labels to be functional. I've tried the data-clickable=true attribute and that does fixes the problem, but that renders labels non-draggable and in many cases they take up a lot of space so it's not an acceptable solution for us. check out this jsfiddle: http://jsfiddle.net/annam/NMVmL/ (remember that it needs to be on mobile! on web it works fine) label "1" is the problematic one.. On web it works ok.. it is draggable if we are dragging, but if you just click on it it changes state.. that's actually perfect because when you drag it detects that it's a drag interaction, not a click one, so state does not change on drag end. However on mobile this is not what happens.. dragging works but just tapping on the label never changes state. label "2" and textarea works as expected as dragging is prevented on them, textarea by default and label 2 because of the data-clickable attribute.. label 2 works on mobile and is clickable to change state, but I can't use this because it prevents dragging. As i said this only happens on mobile devices, on desktop this works as expected. so i'm guessing this is some kind of issue? any thoughts? also a suggestion is to make the items that by default prevent dragging an option.. so that user can determine which tags should enable this.. eg to easily add <label> if required.

that's great, thanks for the reply and info! it's actually a lot more intuitive this way I think

Hello, We recently updated to the latest version of Draggable and there's seems to have been a change in functionality regarding bounds: Even though the docs this seems to no longer be the case. If the draggable element is inside an absolutely positioned element, the bounds are relative to the parent element and not the entire page. here's a jsfiddle: http://jsfiddle.net/annam/Y9Y3D/ This definitely worked as described in the docs prior to the latest draggable update. Has this behaviour been changed and the docs are out of date, or is this a bug? Thanks, Anna

Hello! I see that you advertise, in your Draggable plugin page, that it can differentiate between click and drag, and trigger events accordingly.. However click doesn't seem to be prevented on drag. At least not the native click event.. Is the above only applicable for the Draggable custom "onClick" event? How can I prevent the native click event from triggering? I tried all jQuery methos "stoppropagation", "stopImmediatePropagation" and "preventDefault" and it doesn't seem to do anything. check out this jsfiddle: http://jsfiddle.net/annam/nTdAs/1/ Hopefully there's something I can do? Thanks!

Once again thanks for your help hopefully firefox will solve this problem soon!

Major breakthrough turns out this is firefox only! I've simplified the jsfiddle to as much as I could and the issue still exists! check it out (in firefox 24.0) http://jsfiddle.net/9eHVQ/1/ btw your cssrule plugin looks amazing, wow i didn't know you could do that!

Hello I'm facing a very strange issue. I am tweening the borderColor of a div, say from grey to red.. At the beginning of the tween, the border-color snaps to transparent and then animates to red from transparent. It's like the timeline can't detect the initial border-color and it assumes it's transparent, and animates it from there. the initial bordercolor is injected as a <style> tag into the dom using jquery .html().. I tried adding a style="border-color: grey;" on the div.. and then the tween worked! It could read the style from the div style attribute but not from the <style> tag. The really strange thing is that exact same setup exists for other properties, eg background-color and i'm not facing any issues with them.. It's also only an issue with a specific div, other divs tween border-color fine. background-color on the same div, in the same <style> tag, works! I've also tried to replicate this in a jsfiddle with no luck. I've been going crazy over here trying to debug this. I was wondering if you have any ideas why this is happening?

Thank you so much!!!! so to timeline.to() function does exactly the same job as the timeline.add(TweenLite()) function? I guess it's better to use the to() then?

Hello again First let me say that I'm very impressed with your excellent support, I've posted on these forums a few times now and I always get a helpful and timely responce. Great job I think I've come across an issue: I have a paused timeline onto which I add tweens - which of course I don't want them to run until i play() the paused timeline. This works great unless the tween has duration 0. If the tween has a duration of 0 the tween runs immediately, as well as as soon as the timeline is played. Check out this jsfiddle, this is very easily reproducable: http://jsfiddle.net/annam/wBwTf/ Just comment out the first t.add() declaration and add the second one in to see the difference in behaviour between the two. The box should remain yellow in both cases as I haven't played the timelne yet, right? Thank you!

Hello again I have a TimelineMax instance where i tween some properties. However I have some properties that I can't tween and require DOM recreation - for which I call as a function at the end of the timeline. I am basically building the whole DOM object again, with the new, tweened properties, and some extra changes, usually style-related, sometimes DOM-related. Unfortunately this DOM recreation seems to break the reverse function of the Timeline.. Even though the HTML classes and IDs are still the same after the dom recreation, it seems that the timeline has the target DOM stored and can't find it on reverse? Here's a jsfiddle: http://jsfiddle.net/annam/kgR5X/ If you comment out the .html() function you will see that reverse works. What can I do to force the timeline to re-find the targets on reverse? Hopefully there's a way around this.. Thanks so much!

I see! I did notice that argument but didn't realize that "Events" also includes the functions. Works great, thanks!

Hello We have a situation where we might want to suddenly seek to the end a timeline instance with no transitions. we need everything in the timeline to happen, just in 0 duration. so we use timeline.seek(totaltime); This works great for the tweens in the timeline, they all transition to their ending point, even the ones who have not yet been initialized. However, the functions in the timeline are not triggered. check out this jsfiddle, we need the count to get updated even if the transition is forced to a stop: http://jsfiddle.net/annam/NNUm7/2/ i understand that this might be required behaviour.. but is there any way to force the functions to trigger? thanks a lot!

thats great thanks!

thanks for the explanation, sounds right, and the fix works like a charm i was also wondering what you think of the performance overhead that will be caused by instantiating a new timeline instance every time we want to trigger the animation, and possibly storing these timeline variables in an array as in the sample code (although we will try to kill and delete as many as possible for optimization) - do you think it could create a performance or memory problem? again, thanks a lot really good support!

Hello, I'm having an issue with tweenFromTo. I create a timeline, onto which I add some tweens, some with delay. I play() this timeline, but it might be paused before completion. Then, I use the tweenFromTo() method to manually reverse the timeline back to 0. If all the tweens start playing before the timeline is paused, then this works perfectly. I can use the tweenFromTo() to reverse the timeline from any seek position with no problems, even if the tweens had not originally completed before pausing the timeline. However, if I pause the timeline before some of the tweens have started running, and then use tweenFromTo() on the timeline with a from time after the pause time, where other tweens are expected to run, then these extra tweens don't run, even though they are added to the timeline. It's like the delayed tweens are not there at all. Here's a JS fiddle: http://jsfiddle.net/annam/Jz69s/ (Using reverse() is not an option for me, and the same goes for restart(), which is why you will see that I'm rebuilding the timeline every time in the jsfiddle. Notice that I'm retrieving the seek position of the latest timeline, to reverse seamlessly, but the tweenFromTo always uses the first timeline that was created) The expected transition is: On "go!" mouseover: - Top and Left is transitioned, duration 1 delay 0 - Background color is transitioned, duration 1 delay 1 (as soon as top and left are done transitioning) On "go!" mouseout, the mouseover transition is manually reversed, but from the point where the last mouseover transition has left off so if the mouseover transition had time to complete: - Background color is transitioned, duration 1 delay 0 - top and left is transitioned, duration 1 delay 1 but if the mouseover transition only run for 1.5 seconds: - Background color is transitioned, duration 0.5 delay 0 - top and left is transitioned, duration 1 delay 0.5 To see the issue: Mouse over "go!" and keep the mouse on "go!" for 2 seconds, until the transition completes. Then, mouseout. Try to mouseover and mouseout again, without waiting the full 2 seconds each time - eg wait for 0.5 seconds, then mouseout, then mouseover again for 1.5 seconds, then mouseout. This functionality is correct. Rerun the JSfiddle Now Mouse over "go!" but only keep the mouse on "go!" for less than a second, before the background color starts tweening. Now try to mouseover and mouseout repeatedly again, and also try to leave the mouse over for the full 2 seconds. You will notice that the background color never transitions back to light gray, it is stuck to the dark gray. This seems to happen because the original timeline never completed during the first, normal play(). However, when initializing, the tweens are there! could you help me understand why this is happening? it doesn't seem to be the desired functionality, what if i've added the tweens to the timeline but don't want to run it sequentially? Thanks a lot!

hello again, the timeline solution works great! thanks so much!

the first idea sounds great, it should work! and its pretty clean too.. thanks the second suggestion, the timeline one, seems even better, but wouldnt the timeline be interrupted if the transition is revered? would the function still be called, and the timeline sequence continued, if the first transition never completes? thanks a lot (to both!) ill try the suggested solutions later on and let you know!