Sahil

Thanks Blake, I will go through it and see if I can modify it to wrap while dragging.

Thanks Blake, I decided to use your other pen and have posted another question. It is responsive and draggable, I just need some help with wrapping calculation and wrapping while dragging. EDIT: I was able to make it responsive but couldn't convert it into autoplay as you have used single Tween so I wasn't sure if tweens can be tweened partially so decided to use other pen.

Here is the pen that I was talking about, it will will be perfect if you don't want to it to autoplay. Here is another Pen by Blake which isn't draggable And here is fork of Blake's pen that I am working on to convert it into draggable.

Hi, At the moment I am working on a infinite carousal which can be dragged as well. I was able to add draggable functionality to Blake's pen but how can I duplicate modifier's wrapping behaviour for draggable? So the entire carousal is in xPercent and draggable updates x while dragging. Also, Can someone explain calculation done here? function wrapPartial(min, max){ var r = max - min; return function(value){ var v = value - min; return ((r + v % r) % r) + min; } } I don't understand what it does exactly and where does 'value' come from. Thanks.

Ya, thanks alot.

Well I was reworking Blake's pen into something responsive and just wanted to know what does render method do, and what each parameter is for.

Hi, I was going through Blake's pen where he uses render method as follows animation.render(animation.time(), false, true); In TweenLite docs there is no information about arguments and render method is missing from TweenMax docs. Can you please update the docs? NOTE: animation is TweenMax instance

Thanks, I should have checked docs first.

A quick question, I want to add and remove draggable functionality on element on resize so certain element can be dragged in mobile devices but not on destktop. What's proper way to do so?

You mean entire community or just regular members? I am soon going to adopt using svgs so I am going to give it a try.

In that case, more people will be willing to help you if you provide your code. Just post new question and attach codepen with your current code so we can help you out or guide in right direction.

I tried to search a codepen by Blake, it is nice example to get started. I had tried to create draggable infinite slider, it took me 5 different approaches and almost 3 days to get it right. I will suggest you to create basic slider that goes to left and to right, then use draggable with container as trigger(check docs). Dragging will update x on all slides and on release set x to zero and slide all slides depending on direction using xPercent. Once you figure this out you can make it more complex without much issues, just start by small attempts. I don't have code that will help you instead of confusing you, and it really takes a lot of time to wrap your head around something that seems so simple. There was some recent thread where Blake had posted his codepen that will help you.

No it states that GSAP will use jQuery(only dollar sign) as it is very commonly used and that you don't need to do anything else to use jQuery as selector if you are already using it. But you have freedom to use other selector engines if you want. Seemed pretty straight forward to me.

Yes it is correct. If jQuery is available on page then GSAP will use jQuery as selector. So you can pass first argument as if you are using jQuery selector instead of using jQuery syntax directly. So basically instead of writing TweenLite.to($('.myClass'), 1, {}); you can write TweenLite.to('.myClass', 1, {}); Note: GSAP only uses the dollar sign, so in case you are using anything else that uses $ sign, for example mootools then you will run into unexpected behaviors. In such cases you can use TweenLite.selector = YOUR_SELECTOR_ENGINE; and set selector of your choice, as stated right above docs you posted.

A quick google search tells me its not possible to select pseudo elements, and I think I read something similar in another thread. You can instead add and remove class which will give you the effect you want.

You can just use jQuery for selection, GSAP works with it without any issues.

Ya I was going to ask if it will be good idea to follow thread I mentioned in previous reply, but ya it disables touch scrolling completely. Thanks. I had given up already once I found out contextmenu is causing it and after reading your research I think only choice is to let it be. Sorry for assuming you are ignoring my thread. Thanks alot.

typeof ScrollToPlugin; returns "function" if ScrollToPlugin is available. if(typeof ScrollToPlugin === "function"){ //use ScrollToPlugin } Same can be used for 'CustomEase'.

No that didn't help but I guess I will let it be. I think what it causes it is the browser feature to long press and select text etc. So just now I selected some text from random element in opera and tried long pressing on target element and onRelease event isn't firing anymore. Which is not any solution but explains what is happening or at least I guess so. Firefox on the other hand keeps behaving same even if you keep some text selected. Luckily chrome works fine. Edit: found this thread which does help me, I will see if I should use it or not.

Are you going to look into it? I am ok if it doesn't work in Firefox and Opera, somewhat concerned if it behaves same way on IOS. So please let me know. Thanks

No it actually fires onPress event and then fires onRelease, I have updated my pen for color change. allowNativeTouchScrolling:false does the trick for firefox but causes issues with scrolling so I prefer to keep it true. Opera is behaving same in either settings. Here in video you can see onRelease getting fired in both pens.

Here is simple demo, in chrome it works fine. In Firefox and Opera in android, if you grab the element and don't swipe, it gets released after brief moment. If you drag even a little then it doesn't get released. I tried your pen as well, it gets released in brief moment too.

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?

Not sure, but if I had to do it I would have just animated that property separately with extra line of code.

Try animating using className so resulting values aren't applied to element. tl.from(collapsible_element, .5, { className: "+=heightZero" }, 'open');