🎉 Black Friday deal! 30% off your first year of CodyHouse Pro →


Progress value is 30%

Stacking Cards

Cards stack effect on vertical scrolling.

View Demo


All components are based on CodyFrame.

This component includes variations. Variations share the same SCSS/JS code but differ in their HTML.

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.

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.