archimedo Posted May 25, 2021 Share Posted May 25, 2021 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! Link to comment Share on other sites More sharing options...
GreenSock Posted May 25, 2021 Share Posted May 25, 2021 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! 1 Link to comment Share on other sites More sharing options...
archimedo Posted May 25, 2021 Author Share Posted May 25, 2021 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 Link to comment Share on other sites More sharing options...
GreenSock Posted May 28, 2021 Share Posted May 28, 2021 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! 2 Link to comment Share on other sites More sharing options...
archimedo Posted May 31, 2021 Author Share Posted May 31, 2021 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! Link to comment Share on other sites More sharing options...
GreenSock Posted May 31, 2021 Share Posted May 31, 2021 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! Link to comment Share on other sites More sharing options...
archimedo Posted June 8, 2021 Author Share Posted June 8, 2021 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! Link to comment Share on other sites More sharing options...
Cassie Posted June 8, 2021 Share Posted June 8, 2021 The small question mark is because you're requesting an image that isn't there, check that your image paths are correct. ☺️ Link to comment Share on other sites More sharing options...
GreenSock Posted June 8, 2021 Share Posted June 8, 2021 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. 1 Link to comment Share on other sites More sharing options...
archimedo Posted August 26, 2021 Author Share Posted August 26, 2021 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! Link to comment Share on other sites More sharing options...
OSUblake Posted August 26, 2021 Share Posted August 26, 2021 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}) 1 Link to comment Share on other sites More sharing options...
archimedo Posted August 26, 2021 Author Share Posted August 26, 2021 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) Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now