Help on GSAP 3 Modifier - Card Stacking/Rotation Effect

[mark.tingson]

Hi guys,

 

I am working on an effect that when users click on the left and right arrows, it should rotate accordingly same like a horizontal image slider/carousel works. However, this one should have a stacking effect and I thought that the modifiers would be key to achieving this. I think I need to animate the y, scale and z-index so the values should always rotate to the following values:

 

y: -20, -10, 0

scale: 0.9, 0.95, 1

z-Index: 0, 1, 2

 

Can someone please help me understand what I am missing?  I may not be understanding how modifiers works.  Hope my CodePen makes sense.

 

Thanks in advance!

 

See the Pen GRWBNLX?editors=1010 by mark-anthony-tingson (@mark-anthony-tingson) on CodePen

[GreenSock]

Here's how I'd probably approach this:

See the Pen qBryorx?editors=0010 by GreenSock (@GreenSock) on CodePen

 

It's a bit more complex, but it offers a lot of flexibility. I sprinkled comments in there to help you understand. Usually we don't just build things like this for people, but it was a fun challenge and I figured it might help others as well. 

 

Is that the effect you were looking for? 

[mark.tingson]

THANK YOU so much Jack! This is the effect that I'm looking for. 

 

I'll take a look at this!

 

Cheers!

 

[Nicoletta]

I've tried implementing the solution proposed  but it only works for a card stack of three cards (the example I' tryin to make work has four or five cards). I tried debugging it but I cannot seem to get it, any explanation on that behaviour? Btw, insane job on that @mark.tingson and @GreenSock !

 

 

[Cassie]

Hey Nicoletta - it works perfectly for more cards - it's just using a forEach loop!

 

Example below with more cards added, maybe you weren't styling them?

See the Pen BamxvZW by GreenSock (@GreenSock) on CodePen

 

 

[Nicoletta]

10 minutes ago, Cassie said:

Hey Nicoletta - it works perfectly for more cards - it's just using a forEach loop!

 

Example below with more cards added, maybe you weren't styling them?
 

 

 

 

Hey @Cassie, thanks for the prompt response! What I mean is that by adding more cards you 'lose' the opportunity to display them as you're only displaying the first three. Is there a workaround for that?

[GreenSock]

I've updated the CodePen to make it easier to show however many cards  you want:

See the Pen BamxvZW?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that help?

[Nicoletta]

7 hours ago, GreenSock said:

I've updated the CodePen to make it easier to show however many cards  you want:

 

 

 

Does that help?

Thanks so much! However, I'm finding difficult to show the number of cards I actually have: let's say I have 4 cards in my code and I want to show 4, this way it only shows three. Is that possible? I tried changing the values in the code but the only thing it does is messing up the animation

[Nicoletta]

4 hours ago, Nicoletta said:

Thanks so much! However, I'm finding difficult to show the number of cards I actually have: let's say I have 4 cards in my code and I want to show 4, this way it only shows three. Is that possible? I tried changing the values in the code but the only thing it does is messing up the animation

Rephrasing this: with the latest solution you proposed, it cannot be possible to have a number of `card` divs that is equal to the `cardsToShow` variable, which is exactly the use case I'm after

[GreenSock]

You can't logically do that which is why I did this: 

spacing = zoomDuration / Math.min(cardsToShow - 1, (cards.length - 2)),

The most it can show is 1 less than the total number of cards, otherwise you'll end up with empty slots. Let's simplify it to 3 cards - if you have ALL 3 cards showing, imagine what will happen when you hit the "next" button and they all start moving. The bottom one (furthest back) starts moving forward but there's NOTHING BEHIND IT! So there's a gap. The front-most card would fade out and eventually get placed back at the bottom, so you'd see it suddenly pop into existence there. 

 

You need a stationary card on the bottom for that first part of the animation. So each card's animation actually has it stationary for the very first slot, then starting to zoom forward. So if you've got 3 cards, you can only have 2 showing at any given time.

 

Plus the whole point of this algorithm is to allow you to have what appears to be a seamless loop without actually duplicating any of the elements (they can't exist in two places at once). So you couldn't, for example, have 3 cards but set it up to show 5.

 

Does that clear things up?