MOH

I know that. This is not the case here for sure, since I am not hiding anything. Because if it was, i would have this issue without the dragger. But when i removed the dragger all is well on the Ipad.

Does the draggable have any issues with angularjs? I notices that the ng-clcik events are no longer working. As well as all other angular events.

Hello, Guys i have a Draggable implemented on a container with the "scrollLeft" feature. On a desktop computer, the container scrolls and the elements inside it are clickable. The thing is each element inside the container has a hover effect, and then when clicked, it gets expanded. I have come up with a problem on an Ipad. The draggable works great and all, but when i click on an element the hover effect takes place, after a research i found out that this is a safari feature by apple to let the hover effect show. I tries the suggested double tap and that did not work. I also tried the .no-touch approach and that did not work as well. For the sake of testing as well, i tries the data-clickable approach too but no,luck as well. when I removed the draggable the elements expanded as expected. Am i missing something? Please help. MOH

Awesome. Thanks Rodrigo for the help. Got it working using your method.

Thank you man. I will review this code and see what i can do.

Thank you for the answer Rodrigo, Maybe i was not clear enough. I do not have a problem with updating the timeline or tweens when dragging the draggable. I am using the progress() and totalProgress() as well. What i want is the opposite. The timeLineMax instance has the pause: false attribute which means that when the page is loaded the tweens start automatically without the draggable. How can I update the draggable.x in order for it to be in sync with the tweens "WHILE AUTOPLAYING". My code starts with autoplaying the tweens, and when the user touches the draggable the autoplay is stopped and then the tween is affected by dragging the draggable. Take a look: var mainTimeline = new TimelineMax({ onUpdate: updateSlider }); var theDragger = Draggable.create("#Slider1", { type: "x", bounds: "#theCont", edgeResistance: 1, throwProps: true, onDrag: function () { mainTimeline.pause(); var theProgress = (theDragger[0].x / $('#theCont').width()); //console.log(theProgress); mainTimeline.totalProgress(theProgress); }, onThrowUpdate: function () { var theProgress = (theDragger[0].x / $('#theCont').width()); mainTimeline.totalProgress(theProgress); } }); function updateSlider() { theDragger[0].update(true); } In the updateSlider function i want to edit the dragger position to stay in sync with the autoplaying tween set. I hop this clears the confusion. Thank you

I saw this update() method in the documentation. I think this is meant to do the trick but i could not get it to work. Can you provide an example?

Hey Guys, Carl your project on codepen is excellent. I have already done something like that before, using the exact same methods. Manipulating the stroke-dasharray and stroke-offset as well. I got the drawing animation working for me. When i was using the jquery UI dragger/Slider all is well. But i decided to replace it with greensock's Draggable in order to get the slick throwing and snapping effects. Currently I am stuck on updating the draggable position when the timeline is autoplaying. In Jquery UI dragger I was using something like your code: function updateSlider() { $("#slider").slider("value", t.progress()* 100); } Can you show me how to replace this code with the on to update the 'x' of the greensock dragger? I was trying something like this: theDragger[0].x = mainTimeline.totalProgress() * $('#theCont').width(); But no luck. Please help me. Thanks

Hey Guys, I am still new to GSAP animation, and i need some help. I am implementing a timeline using greesock js which handles a presentation of different SVG images mainly made up of simple lines, circles and paths. What is want to achieve is the animation of these SVGs while to timeline is being moved. As far as the timeline implementation goes, all is well. But when it comes to animating the svg the way i want i am reaching a road block. I can animate the scaling, width and opacity with no problems. The code is as such: TimeLine.from($('#Shape2 polygon'), 2, { scale: 0, onStart: function () { //Dont mind the variables mainTimeline.timeScale(NormalTimeScale); } }, timeShift) What i want to achieve is the drawing effect of the lines circles etc... As the user moved the timeline scroll bar, the vector graphics should be drawn and of course the reverse effect should be obvious. I am mainly trying to achieve this with stroke-dashoffset and stroke-dasharray but i cannot alter these properties even after i included the AttrPlugin. This is what i am trying: Timeline.from($('#Shape2 line'), 1, { atrr: { 'stroke-dasharray': '20px' }}, timeShift + 1) Please note that these are just example blocks of code. Can you guys help me with this please?