[Wrapping draggable carousal while dragging]

I updated my demo, now it works perfectly with one issue of some slides flashing briefly when dragged too far. If that can be resolved then it will be perfect, still I am satisfied with result.

 

Please let me know if I can improve it any way.

 

Thanks.

 

See the Pen veLaxP by Sahil89 (@Sahil89) on CodePen

 

[Wrapping draggable carousal while dragging]

Hi Blake,

 

Thanks for helping me out. I went ahead and updated my demo further, I was able to wrap elements.

 

I didn't use magical methods like you do, I basically calculated this.x plus the distance each element traveled in either direction and updated their xPercent to lowest or highest. It works as I would like, I will just clean up my code and update the demo.

[Wrapping draggable carousal while dragging]

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

[Incomplete docs for TweenLite.render()]

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.

[Equivalent .not(this) in GSAP]

Here is the pen that I was talking about, it will will be perfect if you don't want to it to autoplay.

 

See the Pen ZOgGXB by osublake (@osublake) on CodePen

 

Here is another Pen by Blake which isn't draggable

 

See the Pen brZLoP by osublake (@osublake) on CodePen

 

And here is fork of Blake's pen that I am working on to convert it into draggable.

 

See the Pen veLaxP by Sahil89 (@Sahil89) on CodePen

 

[Wrapping draggable carousal while dragging]

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.

See the Pen veLaxP by Sahil89 (@Sahil89) on CodePen

[Incomplete docs for TweenLite.render()]

Ya, thanks alot.

[Incomplete docs for TweenLite.render()]

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.

[Incomplete docs for TweenLite.render()]

Hi,

 

I was going through Blake's

See the Pen ZOgGXB by osublake (@osublake) on CodePen

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

[What is the proper approach to add/remove draggable functionality on element?]

Thanks, I should have checked docs first.

[What is the proper approach to add/remove draggable functionality on element?]

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?

[SVG & Icons Editor - offer for Greensock'ers]

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.

[Equivalent .not(this) in GSAP]

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.

[Equivalent .not(this) in GSAP]

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.

[Docs - is this technically correct?]

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.

[Docs - is this technically correct?]

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.

[Tweening $(this):after]

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.

 

 

See the Pen aLoZOO?editors=1111 by Sahil89 (@Sahil89) on CodePen

 

[Equivalent .not(this) in GSAP]

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

 

See the Pen yzBOdG by Sahil89 (@Sahil89) on CodePen

 

[Draggable onRelease fires in mobile device after a moment]

Quote

The only way to circumvent all this is to call preventDefault() on the original touchstart event, but if you do that, it will refuse to allow any touch-scrolling.

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.

 

Quote

Please let me know if you (or anyone else) can figure out a solution. 

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.

[Loaded Plugins]

typeof ScrollToPlugin;

 

returns "function" if ScrollToPlugin is available.

 

if(typeof ScrollToPlugin === "function"){

	//use ScrollToPlugin

}

 

Same can be used for 'CustomEase'.

[Draggable onRelease fires in mobile device after a moment]

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.

[Draggable onRelease fires in mobile device after a moment]

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

[Draggable onRelease fires in mobile device after a moment]

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.

[Draggable onRelease fires in mobile device after a moment]

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.

 

See the Pen NvwxQx?editors=1111 by Sahil89 (@Sahil89) on CodePen

 

[Draggable onRelease fires in mobile device after a moment]

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?