Infinite product image gallery with seamlessLoop helper

[deVitae]

Hi all!
 

Built an infinitely loopable product image gallery with the help of GSAP's priceless https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop/

It works and I'm fairly happy with it - hopefully it'll be of use to someone else too, if only to learn from my quite crude approach
However, I've got a few questions and would greatly appreciate if anyone could spare a moment or two and point me in the right direction.

1. On every active element change, I'm dynamically adding CSS classes to previous, active and next elements (the only three that will be visible in a proper desktop viewport) and then, inside CSS stylesheet, adding "will-change: transform, opacity;" to those three elements. After the element leaves the viewport, classes are removed. Lines 13 to 38 in JS code.

 

Is this a valid way to optimise for performance? Anything I could be doing better?

 

2. I'm using draggable with inertia enabled. I'm loving it but how can I increase friction? Right now the images whirl just slightly too fast for my taste. I suspect that I need to edit snap value or something else in the helper code (from line 267 onwards)?

 

3. On page load, the first (red) image begins in the left corner rather than the centre. An interaction (of any kind) is needed for the photos to end up in correct layout.

I could just make loop.toIndex(0) to play on page load but I'd love to understand what I'm missing here.

 

4. Lazy loading images.

I assume GSAP scroll trigger lazy load (

See the Pen oNbKLvL by mrWilson123 (@mrWilson123) on CodePen

) wouldn't work, as images are laid out on horizontal axis? Am I correct in thinking that, for this specific use case, I should hook lazy loading into previous, active and next element functionality? Or is there a better way to achieve this?

 

 

5. Animating rotation based on distance dragged.
Right now I'm using simple gsap.to on active element change to rotate the images. To have dynamic rotation based on distance dragged/moved, I assume I'd need to fiddle with the helper functionality? And is that even advisable - updating the rotation with every movement, no matter how small?

Thank you!

(note: it's using vh for all dimensions and looks better in full screen)

See the Pen MWLZwPQ by vitaeludus (@vitaeludus) on CodePen

[Rodrigo]

15 hours ago, deVitae said:

1. On every active element change, I'm dynamically adding CSS classes to previous, active and next elements (the only three that will be visible in a proper desktop viewport) and then, inside CSS stylesheet, adding "will-change: transform, opacity;" to those three elements. After the element leaves the viewport, classes are removed. Lines 13 to 38 in JS code.

 

Is this a valid way to optimise for performance? Anything I could be doing better?

Sure thing! Many times we see improvements in performance when using will-change: transform; but I've never experimented with will-change: opacity; so I couldn't really tell you to be honest. If it works better and it doesn't create any other issue in your app, then I see no issue in keeping it.

15 hours ago, deVitae said:

2. I'm using draggable with inertia enabled. I'm loving it but how can I increase friction? Right now the images whirl just slightly too fast for my taste. I suspect that I need to edit snap value or something else in the helper code (from line 267 onwards)?

You can use either the dragResistance and/or throwResistance properties in the Draggable config object. 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.

 

throwResistance: Number - A number (1000 by default) that controls how much resistance or friction there is when the mouse/touch is released and momentum-based motion is enabled (by setting inertia: true). The larger the number, the more resistance and the quicker the motion decelerates. (requires InertiaPlugin and setting inertia: true, otherwise throwResistance will simply be ignored.)

 

15 hours ago, deVitae said:

3. On page load, the first (red) image begins in the left corner rather than the centre. An interaction (of any kind) is needed for the photos to end up in correct layout.

I could just make loop.toIndex(0) to play on page load but I'd love to understand what I'm missing here.

I'm not exactly sure about this, but my guess is that the helper function is built to create the loop with the setup you provide from the get go. What you could do is setup your HTML to have that image as the second one, maybe updating the HTML in order to add the last element as the first one or using one of the many Array methods to update the original elements array (if you are using any sort of UI framework that takes an array and loops in order to create the UI (like Vue, Svelte, React, Alpine, etc).

 

15 hours ago, deVitae said:

I should hook lazy loading into previous, active and next element functionality? Or is there a better way to achieve this?

Yep, that's what I would try, based on the index value lazy load the images as needed.

15 hours ago, deVitae said:

5. Animating rotation based on distance dragged.
Right now I'm using simple gsap.to on active element change to rotate the images. To have dynamic rotation based on distance dragged/moved, I assume I'd need to fiddle with the helper functionality? And is that even advisable - updating the rotation with every movement, no matter how small?

Couldn't really tell you about this. I'm 100% sure that this can be done, but you definitely need a bit of custom logic and tweaking of the original helper function, that's for sure. If done properly, sure is advisable and can be done, but it might not be the simplest thing to achieve.

 

Hopefully I was able to shed some light and help in some way.

Happy Tweening!