AMbiso - AI Engineers for your future Unicorns

AMbiso.

ScrollStack Demo

Experience the smooth scroll-based stacking animation. Scroll down to see cards stack and transform.

1

First Card

This is the first card in the stack. As you scroll, it will scale down and stack with the cards below.

2

Second Card

The second card will stack on top of the first one with a slight rotation and scale effect.

3

Third Card

This card demonstrates the blur effect that gets applied to cards deeper in the stack.

4

Fourth Card

Each card in the stack has progressive scaling and rotation for a natural stacking effect.

5

Fifth Card

The final card in our demonstration stack. Keep scrolling to see the complete animation sequence.

About ScrollStack

ScrollStack is a React component that creates smooth scroll-based stacking animations. It uses Lenis for smooth scrolling and provides various customization options:

  • Customizable spacing between cards
  • Progressive scaling and rotation effects
  • Blur effects for cards deeper in the stack
  • Support for both window scroll and container scroll
  • Callback when the stack animation completes
  • Performance optimized with transform and will-change