Stacking Cards

Cards stack effect on vertical scrolling.

How to

Use this component to create a stacking gallery of cards: on scroll, the cards get fixed and their scale value is modified to create the stack. The top of the stack can be controlled using the top CSS property of the .stack-cards__item.

For the effect to work, all the cards must have the same height. By default, the card ratio is defined by the padding-bottom of the .stack-cards__item element. An alternative approach would be removing the padding bottom and setting a fixed height.

You can control the vertical distance among cards using the --stack-card-margin-bottom CSS variable.

If you want the effect to be visible past a specific breakpoint, use a media query:

.stack-cards {
  display: grid;
  grid-gap: var(--space-sm); // cards gap on smaller devices
}

@include breakpoint(md) {
  .stack-cards {
    grid-gap: 0;
    --stack-cards-gap: var(--space-sm); // cards gap on scrolling
  }

  .stack-cards__item {
    position: sticky;
    top: var(--space-md); // cards top position when they get fixed
    transform-origin: center top;
  }
}

🎓 Tutorial: How to create a stacking cards effect.

Categories

• Content and Layout > Card
• Content and Layout > Features
• Content and Layout > Gallery
• Effects > Scroll

Bug report & feedback

Component Github page ↗