thomas-12345 Posted March 15, 2023 Share Posted March 15, 2023 I have started with the card carousel See the Pen rNZvKNJ by thomas-hibbard (@thomas-hibbard) on CodePen , and altered it use a class so I can more easily drop it into a Vue app. However I am really struggling with a few things: 1. I want there to be two separate levels of scale reduction. One foreground scale=1 card, surrounded by two at smaller scale and then a third tier at a smaller one yet, farthest from the center. 2. I want, as an element disappears off the stage at the right, to appear on left stage and vice versa For the first idea, I have tried setting the scale in the initCell method with let scale: number = 0.6; if ([0, 6].includes(index)) { scale = 0.3; } which sort of has the right idea, but really just falls apart because only the cells that are set to 0.3 initially go back to that size as the animation progresses. The second idea, I'm really at a loss for. I did an implementation of this design where each forward/backward tick was its own timeline with a repeat of "1", and doing the animation like I was able to clone cells onto the DOM that had correct innerText for what would be rotated onto the visible stage with the next previous or next button click. This doesn't work at all with the animation I've used as a starting point for this attempt. I would be grateful for any help here. Thank you. See the Pen JjavMdy by thomas-hibbard (@thomas-hibbard) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted March 15, 2023 Share Posted March 15, 2023 Hi, I think the logic in this example should provide you a good starting point based on what you want to achieve: See the Pen RwKwLWK by GreenSock (@GreenSock) on CodePen You might want to remove the ScrollTrigger part from it and focus just on the Draggable related stuff. Hopefully this is enough to get you started. Happy Tweening! Link to comment Share on other sites More sharing options...
thomas-12345 Posted March 16, 2023 Author Share Posted March 16, 2023 @Rodrigo This is a really great example, thank you so much. It will me a while to unpack what exactly is happening here. One concern I have with it though is that when I reduce the number of <li> down to 5, the animation breaks, and I cannot figure out why. There's just a lot going on here and I'm struggling to figure that out. Link to comment Share on other sites More sharing options...
Rodrigo Posted March 16, 2023 Share Posted March 16, 2023 Hi, 2 minutes ago, thomas-12345 said: One concern I have with it though is that when I reduce the number of <li> down to 5, the animation breaks, and I cannot figure out why. Most likely it has to do with the fact that at all times you have 5 elements in view, plus the extra elements that are not visible. So I'd assume that if there are no extra elements there will be no animation. If you want to show 5 elements at a time and you only have 5 then just set the initial styles and create a different type of animation. As you mention this is not the simplest thing to create and follow and, as I mentioned in another thread, we don't have the time resources to break down the logic of complex examples for our users, sorry. My suggestion would be to start with something simple and add complexity to it progressively. If you run into a GSAP related question, don't hesitate to ask! Happy Tweening! 1 Link to comment Share on other sites More sharing options...
Cristina1 Posted August 29, 2023 Share Posted August 29, 2023 Hi! I tried repeating the CodePen above in my Nuxt project but to no avail. Can someone look at it and tell me what is wrong? See the Pen poqyzmw by Cristina-Corghi (@Cristina-Corghi) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted August 29, 2023 Share Posted August 29, 2023 Hi, There are several errors in your example. I recommend you to use Stackblitz instead of Codepen, even with the latter supporting Vue apps directly. You can fork this starter template for free and change it so it looks like your code: https://stackblitz.com/edit/vue-dm3aa9 Happy Tweening! Link to comment Share on other sites More sharing options...
Cristina1 Posted August 29, 2023 Share Posted August 29, 2023 Hi @Rodrigo, I pasted the code into https://stackblitz.com/edit/vue-fr63hb?file=src%2FApp.vue Link to comment Share on other sites More sharing options...
Rodrigo Posted August 29, 2023 Share Posted August 29, 2023 Hi, Did you checked your example? Is still not working. Please be sure to post demos that actually work, that clearly illustrate the issue you're having and that are as small as possible please. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
Cristina1 Posted August 29, 2023 Share Posted August 29, 2023 Ok now adding my entire project is still not working. https://stackblitz.com/edit/github-ci9dvv-kqexp3?file=README.md,components%2FHome%2FCarousel.vue The component is Carousel.vue Link to comment Share on other sites More sharing options...
Rodrigo Posted August 29, 2023 Share Posted August 29, 2023 Hi Cristina, Sorry but if you don't provide a working minimal demo there is not much we can do. The latest demo you linked has over 600 lines of HTML and JS, plus as soon as you start scrolling down, at certain point it goes back to the top 🤷♂️ The only suggestion I can give you is to try to replicate the example in Vue without anything else, just replicate the exact same codepen in a Vue component, then start adding other elements to the example or plug that particular component on a larger app. This is one of the challenges when you try to use someone else's code in your app. Sometimes these examples are very specific and translating them to a larger or different app can post a real challenge. On top of that, as I mentioned before in this thread, this is not the simplest thing to achieve and we don't have the time resources to build custom solutions for our users. Happy Tweening! Link to comment Share on other sites More sharing options...
Cristina1 Posted August 31, 2023 Share Posted August 31, 2023 Hi! Can you only help me to remove, from my CodePen, the scroll of the cards? I would like to keep only the button click event if it's possible... See the Pen mdaPqJb by Cristina-Corghi (@Cristina-Corghi) on CodePen Thank you in advance. Link to comment Share on other sites More sharing options...
Rodrigo Posted August 31, 2023 Share Posted August 31, 2023 Hi, I'm afraid that is not as simple as just remove the ScrollTrigger instance as it seems very intertwined. I fiddled with the example for a bit without a lot of success. This is the best I can come up with the time I have and I can guarantee you that is NOT 100% bullet proof. As you can see the buttons don't work anymore: See the Pen jOXrqVN by GreenSock (@GreenSock) on CodePen Unfortunately we don't have the time resources to create custom complex solutions or adapt complex examples for our users as I already explained to you in my previous post. Good luck with your project! Happy Tweening! 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