Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
mark.tingson

Help on GSAP 3 Modifier - Card Stacking/Rotation Effect

Recommended Posts

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

Link to comment
Share on other sites

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? 

  • Like 3
Link to comment
Share on other sites

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

 

I'll take a look at this!

 

Cheers!

 

  • Like 2
Link to comment
Share on other sites

  • 8 months later...

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 !

 

 

Link to comment
Share on other sites

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

 

 

  • Like 1
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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? 

  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×