ScrollTrigger stacking cards animation logic to create any effect, yes even yours!

[mvaneijgen]

Having cards stack is a question I see often asked on the forum and its logic is fairly simple, the only thing is you have to start with a solid foundation before you start animating things, this is not only a must for the stacking cards animation, but for animating anything!

 

First of @Cassie did a really great video on this topic that explains everything in just 2 minutes, so the TL;DR can be found here.

 

Let's walk through the process that works for me 99% of the time. Here is the starting position, we have just some HTML and CSS and we have five cards that we want to stack. If we just use it as is we’ll need to do some calculations. The first card is alright, but the second card needs to move up the height of the previous card, and the third the hight of the previous and the first card, ect. It will be possible, but it will require a lot of calculations that differ from card to card, which will make animating things a bit harder.

 

See the Pen MWxgOLa by mvaneijgen (@mvaneijgen) on CodePen

 

What if we turn the logic around, instead of trying to calculate where to cards need to move .to() we start with them all in the same position that way we know where they are before we start animating and this is personally the approach I take with animating anything with GSAP. See below here an example, I really like @cassie’s idea of doing the stacking with Javascript, ”progressive enhancement!” (but that is an other topic), so here is just the CSS stacking all the cards right on top of each other. 

 

Instead of setting the cards to absolute, there is some clever trick with CSS Grid. The parent gets display: grid and all the elements in side get set to the same cell, now they are all on top of each other and they are still in the flow of the document, which you would lose with setting position: absolute;

 

See the Pen NWJKagv by mvaneijgen (@mvaneijgen) on CodePen

 

Ok, now to show why this would be a great way of thinking about it.  Check it out, we can move the cards .from() any position to the center of the screen with just one tween! I hope this shows you how powerful this can be with just a few lines of code!

 

See the Pen poYzaJW by mvaneijgen (@mvaneijgen) on CodePen

 

Quote

“Yeah, but my effect is way different. I want them to…”

Ok let's explore this further. You want to visually show that it is a stack of cards, so you need an offset at the top of your cards. Just use gsap.set() to offset the cards based on their index and done! I hope you can see that you could easily change all the x properties to y and have the effect be vertical.

 

See the Pen ExMYQyO by mvaneijgen (@mvaneijgen) on CodePen

 

Quote

“Oh, but I want them also to scale just a little. I want to be extra fancy!”

Tell you what, I see you’re not convinced, I’ll trow in an extra perspective rotate for free! As you can see this all uses the same HTML and CSS and with just a few small tweaks to the GSAP code we can drastically change how the animation looks and feels. 

 

See the Pen MWxgQbV by mvaneijgen (@mvaneijgen) on CodePen

 

What I hope to illustrate with all these examples is that a solid foundation of CSS will allow you to create any effect you want with just a small amount of GSAP. 

 

Wait…! We havent talked about ScrollTrigger, as you may have noticed none of the demo’s above make any use of ScrollTrigger and that has a good reason! Where we started out with just CSS the same can be said of ScrollTrigger it is a smart idea to focus on each step of the animation one at a time, so that issues don't compound when moving to fast to a new step. All ScrollTrigger is doing is animating your animation on scroll, so you first have to create a solid animation before you start to think about implementing ScrollTrigger. But all the demo’s above have ScrollTrigger logic. Just enable the ScrollTrigger code that is commented out to see how they would work.

 

Collection with even more stacking card examples

 

Ok, last one because it is so much fun! Small extra note GSAP uses a default ease: “power1.out”, which gives you animation a little flair for free, but when using ScrollTrigger with scrub: true,  it can ‘feel’ nicer to set ease: “none”. (Implemented in the last demo) Hope it helps and happy tweening!

 

See the Pen gOEYewo by mvaneijgen (@mvaneijgen) on CodePen