Stacking Cards

Installation

1pnpm dlx shadcn add @fancy/stacking-cards

Usage

Wrap StackingCards around the content you want to animate and StackingCardItem around each card you want to animate. The structure looks like this:

1<StackingCards>
2  <StackingCardItem>
3      {/* Your card goes here */}
4  </StackingCardItem>
5</StackingCards>

Understanding the component

The component utilizes scroll progress to determine the scale of each element. The first element has the highest scale multiplier, making it the smallest when it reaches the bottom of the container's scroll area, while the last element follows the opposite pattern, creating a layered effect.

To achieve this, I use each element's index to calculate its scale multiplier. Just simple as that! 😀

Notes

• By default, this component uses the window to track scroll progress. However, in some cases, you may want to wrap it inside another scrollable container. To achieve this, simply define the container for useScroll from motion. In the Demo above, I defined the containerRef and passed it to the scrollOptions prop of the StackingCards component.

• To ensure StackingCardItem works correctly, you need to define its height. This allows the wrapper to have a larger height than the card itself, ensuring that the topPosition functions properly.

Props

StackingCards

StackingCardItem