auto scroll gallery on loop and with mouse wheel

[archimedo]

Hi everyone,

I would like to build an image gallery like this where pictures keep looping automatically but at the same time, it's possible to interact through the gallery using the mouse wheel as well. I would also achieve an effect like that where images, instead of scrolling out of the screen shrink on the side.

 

So I was trying to understand where to start, I'm sure if it's better to try to replicate that effect from scratch with vanilla js or if GSAP could help me with this case.

 

Of course, I'm not asking the code for it, I just wanted some help to understand where would be better to start and whether GSAP could be helpful for this task or not.

 

Thanks!

[GreenSock]

Sure, GSAP can definitely help. It looks to me like they're not using native scroll functionality - they're likely using some kind of smooth scrolling library that does scroll-jacking. You can do it either way. This article may be helpful:

https://css-tricks.com/going-meta-gsap-the-quest-for-perfect-infinite-scrolling/

 

It may help to ignore scrolling to start and think of it like one long timeline - make it animate the way you want right-to-left where things scale/move and then you just hook that up to the scroll position (or somehow influence the overall progress of that timeline based on scroll/wheel events). 

 

Obviously ScrollTrigger could be a big help. 

 

Good luck!

[archimedo]

2 hours ago, GreenSock said:

Sure, GSAP can definitely help. It looks to me like they're not using native scroll functionality - they're likely using some kind of smooth scrolling library that does scroll-jacking. You can do it either way. This article may be helpful:

https://css-tricks.com/going-meta-gsap-the-quest-for-perfect-infinite-scrolling/

 

It may help to ignore scrolling to start and think of it like one long timeline - make it animate the way you want right-to-left where things scale/move and then you just hook that up to the scroll position (or somehow influence the overall progress of that timeline based on scroll/wheel events). 

 

Obviously ScrollTrigger could be a big help. 

 

Good luck!

Thank you very much!

I'm checking that article! in the meanwhile I've tried doing some experiment and I came up with this code, it's just a raw version but it kind of makes that "shrink effect" I'm looking for. The problem is that I'm not sure how to loop it and how to make the cursor interact with it

 

See the Pen GRWErEe by archemede (@archemede) on CodePen

 

[GreenSock]

Oh, that's definitely not the way to go A setInterval() with getBoundingClientRect() is gonna perform terribly. 

 

It's not a super simple thing to do, but you got me curious so I forked your demo and here's the GSAP-powered version: 

See the Pen ExWwKOx?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Hopefully that at least gets you moving in a good direction. 

 

Happy tweening!

[archimedo]

On 5/28/2021 at 9:39 AM, GreenSock said:

Oh, that's definitely not the way to go A setInterval() with getBoundingClientRect() is gonna perform terribly. 

 

It's not a super simple thing to do, but you got me curious so I forked your demo and here's the GSAP-powered version: 

 

 

 

Hopefully that at least gets you moving in a good direction. 

 

Happy tweening!

 

Thank you so much for your detailed answer!

your example is super useful, I'm still a beginner with GSAP so I couldn't come out with a solution like yours but I'm studying it thanks to your comment as well!

 

As next step I'd like to try to add a mouse wheel interaction with it so that when I scroll the mouse I can scroll the gallery faster (if scroll up) and scroll the gallery backwards (if scroll down).

 

I was thinking to add a event listener on mouse scroll, do you think I could achieve that just with scrolltrigger? which approach would you reccomend me?

 

Thanks!

 

 

 

[GreenSock]

8 hours ago, archimedo said:

I was thinking to add a event listener on mouse scroll, do you think I could achieve that just with scrolltrigger? which approach would you reccomend me?

 

ScrollTrigger is great for linking things directly to scroll positions on the page, but if you just want the mouse wheel to affect things (regardless of actual scrolling), you don't need ScrollTrigger. You can make the animation go faster or slower very easily - just set the timeScale() of it to whatever you want. You can even animate the timeScale to gradually speed up or slow down the whole thing because I built it into one timeline/tween. 

 

Good luck!

[archimedo]

On 5/31/2021 at 8:49 PM, GreenSock said:

 

ScrollTrigger is great for linking things directly to scroll positions on the page, but if you just want the mouse wheel to affect things (regardless of actual scrolling), you don't need ScrollTrigger. You can make the animation go faster or slower very easily - just set the timeScale() of it to whatever you want. You can even animate the timeScale to gradually speed up or slow down the whole thing because I built it into one timeline/tween. 

 

Good luck!

 

Thanks again for your advice.

 

I've been studying your code and even though it's quite advanced for my knowledge of GSAP I've been learning from it step by step!

I was noticing a little issue about the images moving and I couldn't figure  out yet what is the cause: in some cases (like between these two pictures) I see a tiny flickering effect along the image side (like a white line 1px wide).

 

On firefox that is quite noticeable while on chrome is less evident. I thought there might be some issue with images not being all the same size to I forced them to be 35vw wide but when trying on Safari I got this new issue. a small question mark appears in an empty space between those two images

 

Can you help understand what can be the cause of this issue?

Thanks!

[Cassie]

The small question mark is because you're requesting an image that isn't there, check that your image paths are correct. ☺️

[GreenSock]

10 hours ago, archimedo said:

I see a tiny flickering effect along the image side (like a white line 1px wide).

That looks like a rendering artifact from Firefox doing some rounding/snapping. It seems to go away if you just force the images to be very slightly wider, like animate to scaleX: 1.005 instead of scaleX: 1:

See the Pen xxqJdMq?editors=0010 by GreenSock (@GreenSock) on CodePen

 

You could make that value a bit larger too if you want. Totally up to you. 

[archimedo]

Hi I was trying to adapt that code for a vertical scrolling. On mobile I would like the gallery to act a little bit different, instead of scrolling horizontally and "crashing" images on the 2 sides, I'd like to make it scroll vertically with just the image on top shrinking. I've done

See the Pen YzQXPYm by archemede (@archemede) on CodePen

where I could achieve the effect without GSAP whereas my GSAP attempt doesn't work right. here it is:

See the Pen yLXyvyR by archemede (@archemede) on CodePen

 

The thing is that I'd like to use GSAP also of the mobile scrolling because I'd like to be able to switch between vertical/horizontal gallery when rotating my mobile device and I couldn't achive this with the other no-gsap version.

 

Can you help me understand what I'm doing wrong?

Thanks!

[OSUblake]

You need to change the transform origin and get rid of the initial scale.

.fromTo(image, { y: bottom}, { transformOrigin: "top center", duration: bounds.height / speed})

 

[archimedo]

1 hour ago, OSUblake said:

You need to change the transform origin and get rid of the initial scale.

.fromTo(image, { y: bottom}, { transformOrigin: "top center", duration: bounds.height / speed})

 

Thank you so much!

I also add a ScaleY: 1.005 in order to fix a small rendering bug I've experienced with Firefox (even when the scroll was horizontal)