Draggable (endless scrolling)

[Bragolgirith]

I'm trying to create an endless carousel with the help of TweenMax and Draggable.

The idea is to allow the user to drag/scroll vertically and reset the carousel "y" property each time he hits one of the edges for a seamless scrolling experience.

 

In the following codepen I've partially implemented the code - try dragging upwards.

Codepen link: 

See the Pen vEXbRJ by anon (@anon) on CodePen

. (tested in Chrome)

 

It is working correctly so far, except for the fact that when the user hits the top edge and I try to set the "y" property of the carousel with TweenMax.set(), the dragging stops and the user has to initiate a new drag before being able to continue scrolling up. Ideally this should all be a single uninterrupted motion.

 

Any ideas on what causes this behavior and what a possible solution can be? 

 

Greetings,

Brago.

See the Pen vEXbRJ. by anon (@anon) on CodePen

[Carl]

Hi,

 

Instead of trying to query the Draggable's x position and reset it, you can use what we refer to as a drag proxy that will handle setting the y value on your carousel images. In basic terms you create an invisible Draggable and use it to generate values that you apply to something else.

 

Here is a very quick adaptation I made of a previous demo: http://codepen.io/GreenSock/pen/OPRYmQ

 

I don't have the time at the moment to describe how it works in detail, but hopefully it is of some help.

 

If you have questions, let us know.