onDrag, onThrowUpdate : How to dynamically shift the value to create a loop or infinite scroll ?

[mobile]

Hi,

 

I use the great draggable + throwprops in the scrollTop context.

 

Now, I would like to build an infinite scroll loop, both way up and down, as a sort of spinning wheel (often used to select a day month hour ...).

 

I have tried onDrag, onThrowUpdate, testing and changing dynamically the scrollTop() based on my limit values, but it is impossible during the animation, only after.

 

I am now searching using liveSnap or any update() method or thru scrollProxy object changes ?

 

It shall be easy to use scrollTop to build a loop (shifting onthego the dynamic value used by scrollTop), to endlessly loop the scrolled content without breaking the great and smooth draggable animation.

 

= infinite scrollable using draggable, throwprops and scrollTop ?

 

If the scrollTop is higher then the scrollable_limit we have chosen, we wanna that the scrollTop return to 0 while not breaking the actual drag or throwprops movement. And if the scrollTop is 0 and the user want to see the end while dragging, the scrollTop shall be set to the scrollable_limit we set.

 

It could really be useful ! So the user has never to return far up or far down and have an endless repeatition of the content ( scrolling a menu From A to Z, A to Z, A to Z or Z to A, Z to A, Z to A ... ) smooth.

 

 

Thank you.

[Rodrigo]

Since you have a Club membership you could benefit from another tool, Split Text.

 

Basically what you can do is take all the text and split it to lines and as you drag the container you can move the lines up and down. Then when a line disappears at the bottom you can put it back at the top of the stack, so-to speak, and viceversa. Think about an infinite content slider but for text lines instead of images.

 

Take a look at this slider demo to see what I mean:

 

See the Pen CeDkc?editors=001 by rhernando (@rhernando) on CodePen

 

Unfortunately I don't have enough time right now to create a working sample, so hopefully this can help at least to get you started.

 

Rodrigo.

[mobile]

Thank you very much Rodrigo.

I guess there could be other ways to do what I imagine, but draggable + throwprops in the scrollTop context is very useful to me cause it is easy to add mouwheel and two fingers scroll for trackpads. The page I am working on is http://www.balneaire.com (already with some tricks) and on the LEFT SIDE (working sample) I use draggable to go soft thru values, but I would like to have an infinite draggable scrollable loop.

 

For the developper of tweenmax/draggable/throwprops, it shall be easier to do this : Looping option in scrollTop mode. OR at least, a way to manually shift the dynamic scrollTop value during a tick (onDrag, onThrowUpdate) without breaking the general movement.

 

Imagine the dynamic scrollTop value is growing with velocity 1 2 3 4 5 6 ( here you shall be able to shift it to 1 manually according to a value test > 5) and continue 1 2 3 4 5 6 ... smooth. Perhaps easier to explain than to do ?

 

That could really be a famous navigation option.

[Rodrigo]

Well the issue in this one is that Draggable creates a scroll proxy element that allows the overscrolling feature. So as long as you use a scroll-type Draggable instance this is not possible.

 

Perhaps a y type Draggable could do the trick. What you could try is to clone the content and create an infinite slider, like putting the same image three times and once one of the images disappears from view you can add it to the top or bottom, depending on the drag direction. It's basically the same principle of split text but instead of doing it with some lines you'll have to do it with the whole content.

[mobile]

Thank you Rodrigo.

 

I had the same idea. Using y and also exploring the scroll proxy, livesnap ... but during the throwprops/drag, I did not get anything smooth (it only updated at the end). And using y, as mentioned, I lose the easy browsers build in 2 fingers scroll integration for trackpad.

 

Anyway thanks a lot Rodrigo. I will continue to test with y, at least to explore and learn. And I will tell you if I did find a way.

[mobile]

Hi Rodrigo,

 

As I told you, if one has to deal with trackpad (no mouse, no touch screen, no keyboard), draggable is not that easy except in the scrollTop mode cause the 2 fingers scrolling behavier is maintain by the browser or system.

 

So one solution may be using liveSnap, but WITHOUT throwprops cause I did not manage to have a good result with liveSnap throwproped.

 

With scrollTop chosen as type, add in draggable create

 

liveSnap:function(endValue) { return your_function(endValue); }

 

function your_function(endValue) {

// Exemple Height of the view box = 435px

// we have a long div with with 435px sequences

// and we want to loop the part between -435 and -1305

 

if ((endValue > -435) || (endValue < -1305)) { my_EndValue = -870 + ( endValue % 435 ); } else { my_EndValue = endValue; }

 

// or other way to write it

// my_EndValue = ((endValue > -435) || (endValue < -1305)) ? -870 + ( endValue % 435 ) : endValue;

 

return -my_EndValue; // need to reverse the sign of the input endValue

}

 

 

Thank you Rodrigo.