lofka Posted February 28 Share Posted February 28 Hello, I'm trying to create an animation with "scrollTrigger + pin" with 2 cards ( overlap + scale on scroll ). The animation works fine but in the end I have way too much empty space and I don't know how to fix this. I put 2 images to explain the problem and the desired result. Demo Visual Bug Expected See the Pen ZEZzarJ by paallaire (@paallaire) on CodePen Link to comment Share on other sites More sharing options...
mvaneijgen Posted February 28 Share Posted February 28 Hi @lofka welcome to the forum! The issue is that your elements are in these locations and then with an animation you move them up. You do this with transforms (which is great), but this leaves a 'ghost' location of the original element. I've written a guide how you can go about creating stacking cards animations with some simple steps, there are a lot of examples in that post and even more in a codepen collection linked in the post, so there is probably something you can use as a starting point. But be sure to read the post because it goes over some key points which will allow you to make any card stacking animation. Hope it helps and happy tweening! 1 Link to comment Share on other sites More sharing options...
lofka Posted February 28 Author Share Posted February 28 @mvaneijgen Thank Demo Part 2 See the Pen xxeKeLe?editors=1010 by paallaire (@paallaire) on CodePen I think I found a solution: Put the cards in "absolute" position Add a height on the wrapper with a "set" (according to height of the 2nd card + the percentage of translation in Y). However adding the height to the "set" wrapper does not update when resizing the window Does gsap have anything to handle this case? Like invalidateOnRefresh for set ? gsap.set(block, { height: () => { const containerHeight = items[1].offsetHeight + items[1].offsetHeight * 0.2; return containerHeight; }, onComplete() { console.log('onComplete:'); animation(); } }); Link to comment Share on other sites More sharing options...
mvaneijgen Posted February 28 Share Posted February 28 Instead of absolute make the container display: grid with one cell having all elements in that one cell. With absolute the elements get removed form the from the document flow, and with grid they all stay in the flow, which is much easier to handle. This all is explained in the post I've linked, so I highly recommend taking a look at that. 1 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