Sahil

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');

Thanks.

Hi, I have multiple elements in a container and I am using draggable to be able to drag them, after spending a lot of time I came to realize that in draggable using 'this' doesn't let you access target element using jQuery or TweenMax. So how can I access the element that is being dragged? I have attached a simple codepen where I am trying to set padding on target element, I tried many different properties but no changes. Thanks

Fixed your code pen. http://codepen.io/anon/pen/rxzrgX You were calling initialAnim function which isn't present. In pen you can see how to assign tween to a variable. And no, the flex-direction property does not animate.

I had sort of similar problem while using TweenMax in Joomla, I was using firefox and it didn't show any errors in console window. The problem was due to MooTools which you can solve by setting jQuery as selector for TweenMax, TweenLite.selector = jQuery;

That's because of jQuery, mouse events are bound to mouse rather than elements. You will need to track mouse position globally and maybe check position in onUpdate callback in your opentheNav timeline. http://stackoverflow.com/questions/4403518/jquery-hover-not-triggered-when-element-is-programatically-moved-under-the-mouse

You are great help on this forum, thanks a lot.

Thanks a lot. Your solution for z-index is really interesting plus I can use any ease with it. The second example is too complex for me to quickly wrap my head around. Can I compare z value of divs for depth? and How?

I was trying to make a 3D rotator and it works as expected. I am using onUpdate callback to adjust z-index but I was wondering if there a smarter way to get it done? http://codepen.io/Sahil89/pen/wKorbr Also this example only works with fixed width, I tried to make it responsive but timeline doesn't update values once it is created. http://codepen.io/Sahil89/pen/qOqyrb

While using static hitTest method, is there way to detect which element is on top? For example, return true only if first element is on top else false?

Clicking on draggable element gives mouse position as zero. Or it depends on different libraries we use to detect click position? Like in this case it is jQuery. http://codepen.io/Sahil89/pen/EVaqqZ