PavelD Posted March 18 Share Posted March 18 Hello! I'm trying to implement the effect of cards overlapping each other when scrolling, like here (Section "Joining the protection"). This is what I got, but this is not exactly what I want to get. Please tell me how to implement a similar effect using GSAP? See the Pen poBNqwL by UnluckySerivelha (@UnluckySerivelha) on CodePen Link to comment Share on other sites More sharing options...
mvaneijgen Posted March 18 Share Posted March 18 Check out this post I made exactly because of these kinds of questions. The main gist is that you want to start with all the cards at the same position and just move them from there. I think this post really helps you understand how this works, but if you still need help post back here and show in a new demo what you've tried. Hope it helps and happy tweening! 1 Link to comment Share on other sites More sharing options...
PavelD Posted March 18 Author Share Posted March 18 8 hours ago, mvaneijgen said: Check out this post I made exactly because of these kinds of questions. The main gist is that you want to start with all the cards at the same position and just move them from there. I think this post really helps you understand how this works, but if you still need help post back here and show in a new demo what you've tried. Hope it helps and happy tweening! Thank you for answer! I found a codepen that is very similar to what I want: See the Pen mdojxbN by mvaneijgen (@mvaneijgen) on CodePen . But I want to change the height of the cards so that it is not equal to the height of the window. I change 100svh in CSS to 300px and "window.innerHeight" to 300 in JS, but in this case the animation does not work correctly. Could you please point out where I'm going wrong? See the Pen poBRyrB by UnluckySerivelha (@UnluckySerivelha) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted March 18 Share Posted March 18 Hi, Is just a matter of making the correct calculations. For that is better to use a to() instance and yPercent instead of y: // Animte cards up from off screen one by one. tl.to(".card-wrapper:not(:first-child)", { yPercent: (i) => -100 * (i + 1), duration: time/2, stagger: time }); Here is a fork of your demo: See the Pen wvZgJeg by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
PavelD Posted March 19 Author Share Posted March 19 53 minutes ago, Rodrigo said: Hi, Is just a matter of making the correct calculations. For that is better to use a to() instance and yPercent instead of y: // Animte cards up from off screen one by one. tl.to(".card-wrapper:not(:first-child)", { yPercent: (i) => -100 * (i + 1), duration: time/2, stagger: time }); Here is a fork of your demo: Hopefully this helps. Happy Tweening! Wow! This is exactly what I wanted, thank you, you are amazing! There is a small problem. I see that in your fork there is a lot of empty space after the cards. I tried to figure it out and experiment, but I don't understand where it comes from. Can you give me some advice? Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted March 19 Solution Share Posted March 19 Hi, 15 hours ago, PavelD said: There is a small problem. I see that in your fork there is a lot of empty space after the cards. I tried to figure it out and experiment, but I don't understand where it comes from. Can you give me some advice? That indeed comes from the fact that you are moving the cards along in the Y axis while is container is standing still, that inevitably will lead to that empty space. If you want to avoid that I'd recommend a different approach that pins each card and not the cards container or the entire section, like this: See the Pen poBRQRj by GreenSock (@GreenSock) on CodePen Hopefully this helps. 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