Draggable Infinite Carousel with Snap and Indexing

[Nick.Ls]

Hi everyone!

 

@GreenSock Coming back with an update on the horizontal loop helper.

 

It looks like that the carousel gets to scrolled way to fast in some situations whilst dragging, especially in touch devices.

 

Is there a way to minimize or declare the items that it should scroll into view?

 

I've tried to change the snap function but doesn't seem to work...

 

snap: value => {

                let time = -(value * ratio) * tl.duration(),

                    wrappedTime = timeWrap(time),

                    currentIndex = tl.closestIndex(),

                    targetIndex = getClosest(times, wrappedTime, tl.duration()),

                    maxMove = 2,

                    newIndex = Math.max(currentIndex - maxMove, Math.min(currentIndex + maxMove, targetIndex)),

                    newTime = times[newIndex],

                    dif = newTime - wrappedTime;

           

                // Adjust the difference to wrap around the timeline if needed

                if (Math.abs(dif) > tl.duration() / 2) {

                    dif += dif < 0 ? tl.duration() : -tl.duration();

                }

           

                return (time + dif) / tl.duration() / -ratio;

            },

[Rodrigo]

Hi Nick,

 

The snap function only decides the final value the inertia plugin will land, nothing more. If you want to slow down the draggable side of this, you could customize the helper function's Draggable instance by playing with the dragResistance value. From the Draggable docs:

dragResistance
Number - A number between 0 and 1 that controls the degree to which resistance is constantly applied to the element as it is dragged, where 1 won’t allow it to be dragged at all, 0.75 applies a lot of resistance (making the object travel at quarter-speed), and 0.5 would be half-speed, etc. This can even apply to rotation.

 

Another option could be to use the resistance config option in the Inertia Plugin:

https://gsap.com/docs/v3/Plugins/InertiaPlugin/#config-object

resistance
Number - The amount of resistance per second (think of it like how much friction is applied).

 

Hopefully this helps.

Happy Tweening!

[Nick.Ls]

Thank you for the quick reply @Rodrigo,

 

dragResistance is already tested but it doesn't prevent that weird behavior where the carousel will randomly on drag loop through all the items like 10 times in a sec... That's why I asked if I should search for an option where the carousel would rotate only a couple of items at each drag.

 

I would try inertia resistance since I haven't tested it yet and come back with my results.

 

 

[Nick.Ls]

Hi @Rodrigo,

 

I've tried with all kind of resistances but yet the problem still occurs in any situation.

 

For better understanding I am sending a video recording over.

 

As you may see even if I am dragging slowly the carousel (touch device) the carousel at some point triggers an extremely fast

rotation that doesn't make sense. 

 

I've tried changing the ration onPressInit function to half that seems to make things a bit slower but still doesn't help me that much.

Weird behavior at the end of the video.