Solution marsi Posted June 20, 2021 Solution Share Posted June 20, 2021 Are there any methods of creating a vertical carousel, with the selected item fixed in the center of the screen? I've tried something based on this project, but the results have been unsuccessful. Found alternatives on the forum, codepen didn't give any results either Modifiers Plugin for Infinite Image Carousel - GSAP - GreenSock Link to comment Share on other sites More sharing options...
mikel Posted June 20, 2021 Share Posted June 20, 2021 Hey @marsi, Welcome to the GreenSock Forum. You can find a number of examples on the GSAP ScrollTrigger page. For example this one: https://codepen.io/GreenSock/details/RwKwLWK Does it help? Happy tweening ... Mikel 2 Link to comment Share on other sites More sharing options...
marsi Posted June 20, 2021 Author Share Posted June 20, 2021 Thank you, your answer makes a great contribution to solving my question, but I would like to know if there are any code examples with vertical card display? Link to comment Share on other sites More sharing options...
OSUblake Posted June 21, 2021 Share Posted June 21, 2021 9 hours ago, marsi said: I would like to know if there are any code examples with vertical card display? What's wrong the example @mikel linked to? Vertical behavior would be the exact same, just in a different direction. You just need to modify the code so it works on the y axis instead of the x axis. 1 Link to comment Share on other sites More sharing options...
marsi Posted June 21, 2021 Author Share Posted June 21, 2021 Yes, thank you, it all worked out, if anyone needs an example of a vertical carousel: See the Pen KKWYRrE by irtexfree (@irtexfree) on CodePen 1 Link to comment Share on other sites More sharing options...
mikel Posted June 21, 2021 Share Posted June 21, 2021 Hey @marsi, How about this? See the Pen yLMrwrK by mikeK (@mikeK) on CodePen Happy scrolling ... Mikel 5 Link to comment Share on other sites More sharing options...
Mlnto Posted August 26, 2022 Share Posted August 26, 2022 Hi, i try to use the same function, but unfortunately the scroll/next/prev actions are always regarding to the body. If i want to implement it inside div on a page, it always scrolls if the body scroll, and the body jumps up and down, if i click the next or prev button. Is there a way to reduce this animation only inside a div? Link to comment Share on other sites More sharing options...
chacrasoftware Posted September 23, 2022 Share Posted September 23, 2022 Was following all the codepen example above but looks like all of them have this same weird issue, could be something broke from recent gsap update? I have replicated the codepen in our project and has the similar issue Link to comment Share on other sites More sharing options...
akapowl Posted September 24, 2022 Share Posted September 24, 2022 Might be related to this: Link to comment Share on other sites More sharing options...
GreenSock Posted September 26, 2022 Share Posted September 26, 2022 Yes indeed, I believe that's fixed in the upcoming release which you can preview at: GSAP: https://assets.codepen.io/16327/gsap-latest-beta.min.js ScrollTrigger: https://assets.codepen.io/16327/ScrollTrigger.min.js Sorry about the confusion! Let us know if you still see any problems with the beta files in place. Link to comment Share on other sites More sharing options...
GreenSock Posted September 27, 2022 Share Posted September 27, 2022 GSAP 3.11.2 is officially live and should resolve this issue. The CDN may take a little extra time to update, but Github, NPM, and the file downloads are all updated now. 🥳 1 Link to comment Share on other sites More sharing options...
bananafox Posted June 20, 2023 Share Posted June 20, 2023 Hi! Is there any way to turn off the endless animation in vertical slider and make it play only once and after it ends the page continues to scroll as before? Link to comment Share on other sites More sharing options...
Rodrigo Posted June 20, 2023 Share Posted June 20, 2023 Hi @bananafox and welcome to the GreenSock forums! Sure it can be done, but it might not be the simplest thing. That code is very specific for that use case (infinite scrolling) so modifying it might not be the simplest of tasks. I think it might be simpler to just create a couple of subsets of the elements (like attaching the first three at the end of the array and the last three at the start) and create the effect from scratch using that instead of creating the seamless loop, and just animate that timeline using ScrollTrigger. Another option could be to use the seamless loop method and create a timeline with it and use ScrollTrigger to scrub that particular timeline: const seamlessLoop = buildSeamlessLoop(cards, spacing, animateFunc); ScrollTrigger.create({ trigger: ".my-element", start: "top top", end: "+=200%", scrub: true, animation: seamlessLoop, }); Finally is really hard for us to find issues or provide support without a minimal demo. If you get stuck and have a particular GSAP related question, create one that clearly illustrates the problem you're having so we can take a look. Hopefully this helps. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
tiny999 Posted June 26, 2023 Share Posted June 26, 2023 Hi, hope everyone's doing okay. What would be the best way to add an "active" css class to the card in the middle and update that as we scroll? Thanks! Link to comment Share on other sites More sharing options...
akapowl Posted June 26, 2023 Share Posted June 26, 2023 Hello there, Tiny. If I am not mistaken, the examples in this thread here are based off of a horizontal version of that carousel, that is highly optimized and uses rather advanced techniques to begin with. So getting to an idealy performant way to achieve what you intend will likely not be the easiest endeavour, and thus would probably take a lot of considertion into account - and it might just not be within the range of what this free support forum can offer. If you don't mind possible performance drawbacks, you could have a look at the suggestions that were made in this other thread, and try and convert them to match the vertical logic for your needs - the second suggestion made there might be a safer bet with regard to that. Maybe this can help in some way. Happy Tweening! 3 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