Nick.Ls Posted May 24, 2022 Share Posted May 24, 2022 Hi everyone, I've been using GSAP for so long that I think I am having a weird brain freeze and I am unable to create an indexing where the middle image on the slider will take a, let's say, "selected" class. I have used a previous implementation I found in my codepen and I have commented the section where I started my effort of getting an index value for start. Under the snap function. Any help would be greatly appreciated! See the Pen ZErXqNX by Nick_Ls (@Nick_Ls) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted May 24, 2022 Share Posted May 24, 2022 Hi @Nick.Ls. Thanks for being a Club GreenSock member! 🙌 There's a lot of code in there to digest and I'm not 100% sure what you're asking for here. Are you wanting help to know how to calculate the index of the element that's in the center of a fixed-width area like that? Or dynamically based on a resizing viewport area, etc.? Typically we really try to stay focused on GSAP-specific questions in these forums (steer clear of general logic issues), but if there's something I can quickly help with I'll do my best. It would certainly help if your minimal demo only had the absolutely essential pieces to show the problem you're trying to solve (a few colored <div> elements is fine). Also, you may want to look at the helper function in the docs for seamlessly looping things on the x-axis. There's even a draggable version. 2 Link to comment Share on other sites More sharing options...
Nick.Ls Posted May 25, 2022 Author Share Posted May 25, 2022 Hi Jack, Everything works as intended at this point except the feature of returning the viewable images and specifically the middle one. What I am actually trying to accomplish is a way to add a class in the middle image after I drag the carousel. I can't figure it out though doing through draggable. I have tried creating some kind of index calculation but with no luck under the helper functions. See the snap() function where I have commented my progress. Link to comment Share on other sites More sharing options...
Nick.Ls Posted May 25, 2022 Author Share Posted May 25, 2022 Hi again, 20 hours ago, GreenSock said: Also, you may want to look at the helper function in the docs for seamlessly looping things on the x-axis. There's even a draggable version. I've seen also the draggable demo on the helper function and same question applies there? How could I possibly add a class to the middle image once the drag ends animating? I am going to research a bit more through that demo but that's a lot of code to process. I'll come back with my findings if I come close to a solution on my situation. Thanks! Link to comment Share on other sites More sharing options...
GreenSock Posted May 30, 2022 Share Posted May 30, 2022 If you'd like some more help, @Nick.Ls, we'd be happy to take a look at a minimal demo where you tried applying the helper function. Link to comment Share on other sites More sharing options...
Nick.Ls Posted May 30, 2022 Author Share Posted May 30, 2022 Hi Jack, I have used the drag carousel from the helper functions where with tl.current() I retrieve the index increment it to match the center index always and then I pass as a class as I intended to do from the beginning. And it works! I can give you a demo for future reference if you need. Thank you for your interest though! Helper function gave me what I needed it to move on. 1 Link to comment Share on other sites More sharing options...
Cassie Posted May 30, 2022 Share Posted May 30, 2022 It's always helpful for future thread readers to post a solution! ☺️ Glad you got it sorted. Link to comment Share on other sites More sharing options...
Nick.Ls Posted May 31, 2022 Author Share Posted May 31, 2022 Here you go, It's a copy from the draggable carousel on Helper Function with some additions to calculate the middle item. I have commented on the code so you can with ease the additions. And of course I am available if someone needs some further clarification. (the red box that appears is your center element) See the Pen mdXxLXJ by Nick_Ls (@Nick_Ls) on CodePen 2 Link to comment Share on other sites More sharing options...
Cassie Posted May 31, 2022 Share Posted May 31, 2022 Thanks for popping back! I've tweaked it a little as you weren't wrapping the value returned so it was a bit buggy (didn't highlight 1 and 2) But overall great job figuring this out. See the Pen zYRWmOb?editors=0011 by GreenSock (@GreenSock) on CodePen 4 Link to comment Share on other sites More sharing options...
Nick.Ls Posted May 31, 2022 Author Share Posted May 31, 2022 Oh thanks @Cassie, I hadn't noticed that bug... Guess the "lottery spinner" didn't land on 1 or 2 to see the error. You're right! Nice! 1 Link to comment Share on other sites More sharing options...
GreenSock Posted June 1, 2022 Share Posted June 1, 2022 I spent a bunch of time reworking the helper function to accommodate a new option, center: true which will basically make the active element be the one that's centered in the container. Here's a fork that adds an "active" class to the element in the center, and I made one of the elements wider just to make sure it still works when they're not all the same width: See the Pen gOvvJee?editors=0010 by GreenSock (@GreenSock) on CodePen I added an onChange callback as well which gets called when the "active" element changes. It's responsive, and the momentum-based snapping works with the centering too. 👍 Does that help? 10 1 Link to comment Share on other sites More sharing options...
Nick.Ls Posted June 1, 2022 Author Share Posted June 1, 2022 Hey Jack, That is truly a rework! Yes, it helps a lot! My code did the work but this is educational the least. I am going to break down the code to see what you actually did. Very helpful! Thanks again! 2 Link to comment Share on other sites More sharing options...
joris-rotteveel Posted June 3, 2022 Share Posted June 3, 2022 Jack, this is amazing! 1 1 Link to comment Share on other sites More sharing options...
Alex Jester Posted March 7, 2023 Share Posted March 7, 2023 And I can't thank google enough for bringing me on this topic... Many thanks to Jack! 1 Link to comment Share on other sites More sharing options...
ThinkingAbout_dev Posted March 23, 2023 Share Posted March 23, 2023 Thanks @GreenSock for the amazing example! Do you think it's possible to add the "autoplay" feature to the last demo (the slides move automatically, stop during the drag and start again when released)?🙌 Link to comment Share on other sites More sharing options...
Cassie Posted March 23, 2023 Share Posted March 23, 2023 Right here in the setup! const loop = horizontalLoop(boxes, { paused: true, // <----- autoplay, change to false ... }); 3 Link to comment Share on other sites More sharing options...
ThinkingAbout_dev Posted March 24, 2023 Share Posted March 24, 2023 Thanks @Cassie, great!! Hadn't noticed that, I also added repat: -1 to make it infinite. ❤️ 1 Link to comment Share on other sites More sharing options...
aerra Posted April 19, 2023 Share Posted April 19, 2023 Amazing demo, @GreenSock. I realise it's in the name of the function to be horizontal, but I was wondering if there is a way to make this vertical but keep the same other features? (center mode, drag, focus on click etc) Link to comment Share on other sites More sharing options...
Nick.Ls Posted April 19, 2023 Author Share Posted April 19, 2023 Greetings aerra, The helper function used for this example, as I see it, is built to maintain and calculate the widths of the container and the respective items beneath. You surely can achieve a similar example to vertical slider / carousel with gsap but I would go with a fresh approach. There are a lot of examples based on gsap3 if you search for it in order to find a starting point. Last but not least, post your codepen example here if you make any progress and lot's of people will guide you through to your questions. I believe the experts will correct me if I am wrong about the helper function. Wish you a good day! Link to comment Share on other sites More sharing options...
aerra Posted April 19, 2023 Share Posted April 19, 2023 Hi @Nick.Ls, I actually managed to achieve the vertical loop modifying the original `horizontalLoop` function. Here's a codepen: See the Pen PoyGaQr by aerra (@aerra) on CodePen . If anyone sees any issues with this, please do let me know. 1 Link to comment Share on other sites More sharing options...
Nick.Ls Posted April 19, 2023 Author Share Posted April 19, 2023 Well @aerra, this seems like a solution to your request. I will try and give it a better look later on and come back with any findings if so. Nice! Link to comment Share on other sites More sharing options...
Rodrigo Posted April 19, 2023 Share Posted April 19, 2023 Hi, We actually have a Vertical Endless Loop helper function as well that Jack created a couple of months ago: See the Pen MWXPgKm by GreenSock (@GreenSock) on CodePen In this thread there is an example without Draggable though, but it should provide a good starting point: Hopefully this helps. Happy Tweening! 2 Link to comment Share on other sites More sharing options...
Nick.Ls Posted October 5, 2023 Author Share Posted October 5, 2023 Hi everyone! Quick question on the topic... Can we make the horizontal loop non repeatable? Just keep all the other features without having the elements to repeat on the end? Is it a bad approach to try doing this in this setup rather than just create a draggable container or so? 🤔 Link to comment Share on other sites More sharing options...
GreenSock Posted October 5, 2023 Share Posted October 5, 2023 9 minutes ago, Nick.Ls said: Quick question on the topic... Can we make the horizontal loop non repeatable? Just keep all the other features without having the elements to repeat on the end? I'm sure it's possible with enough custom logic tweaking, but it's definitely not a simple thing. The entire point of that helper function was to accommodate infinite/seamless looping/repeating, so there's a ton of challenging logic in there to make that happen. It's beyond the scope of help we can provide for free in these forums, but you're welcome to contact us about our paid consulting services. Or post in the "Jobs & Freelance" forum. But if you just want to make something draggable within a particular bounds, that should be super simple with Draggable using its "bounds" feature. Link to comment Share on other sites More sharing options...
Nick.Ls Posted October 5, 2023 Author Share Posted October 5, 2023 Thanks for the quick reply Jack! It's not more of a to-do request to be honest as more as a theoretical question to try accommodate an extra feature inside my already tweaked slider for future use instead of just creating the scenario I am looking for atm. I believe this will be the next weekend side task for me. Thanks again! 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