How to Create Stacking Cards with CSS in GenerateBlocks

Recently, I came across a cool stacking card effect on a website my friend Paul launched. The cards appeared to stack and fade into the background as you scrolled, creating a dynamic and visually appealing effect. Inspired by this, I decided to experiment and create my own version using GenerateBlocks and a few lines of CSS.

What’s great about this effect is that it’s CSS-only, lightweight, and easy to implement. In this post, I’ll walk you through how to set it up step by step.

Step 1: Setting Up the Layout

Before we dive into the CSS, let’s set up the basic structure of the page.

The Section and Cards

1. Create a Section:
   • Add a container for the stacking cards.
   • Set the max width to your site’s content width (e.g., a CSS variable like --content-width).
   • Center the section by setting the left and right margins to auto.
2. Set Up Flexbox:
   • Change the section’s display to flex.
   • Set the flex direction to column.
   • Add a row gap of 24px to space out the cards.
3. Add the Cards:
   • Insert four containers inside the section, one for each card.
   • These containers will hold the content for each card.

At this point, you should have a basic layout with four stacked cards.

Step 2: Making the Cards Sticky

To create the stacking effect, we’ll use sticky positioning.

1. Set the Section’s Position:
   • Select the section container and set its position to relative.
   • This ensures the sticky cards will stick relative to this section.
2. Add a Class to the Cards:
   • Assign a class (e.g., stack-card) to all four cards.
   • This will allow us to style and animate them collectively.
3. Set Sticky Positioning for the Cards:
   • Go to the stack-card class and set the position to sticky.
   • Set the top value to match the section’s top padding (e.g., 80px).

At this point, the cards will stick to the top of the section as you scroll.

Step 3: Adding the Animation

Now that the cards are sticky, let’s add some animation to make them fade and scale as they stack.

Writing the CSS

1. Target the Cards:
   • Open the Additional CSS section in the WordPress customizer.
   • Add the following CSS:

.stack-card {
  animation: stack;
  animation-timeline: view(auto calc(100% - 80px));
}

@keyframes stack {
  to {
    filter: blur(20px);
    transform: scale(0.5);
  }
}

Explanation

• Animation:
  • The stack animation is applied to each card.
  • The animation-timeline uses a view() function to control when the animation occurs.
• Keyframes:
  • The to declaration defines the final state of the animation:
    • filter: blur(20px) blurs the card.
    • transform: scale(0.5) shrinks the card to 50% of its size.

Step 4: Adding Accessibility

Whenever you add animations, it’s important to consider accessibility. Some users may prefer reduced motion, so we’ll wrap the animation in a prefers-reduced-motion media query.

@media (prefers-reduced-motion: no-preference) {
  .stack-card {
    animation: stack;
    animation-timeline: view(auto calc(100% - 80px));
  }

  @keyframes stack {
    to {
      filter: blur(20px);
      transform: scale(0.5);
    }
  }
}

This ensures that users with reduced motion preferences will see the cards stack without the animation.

Step 5: Using CSS Variables

To make the effect more maintainable, we can use a CSS variable for the padding value (e.g., 80px).

1. Define the Variable:
   • Add the following to the :root selector:

:root {
  --stack-padding-top: 80px;
}

2. Update the CSS:
   • Replace the hardcoded 80px with the variable:

.stack-card {
  animation-timeline: view(auto calc(100% - var(--stack-padding-top)));
}

3. Update the Editor:
   • Replace the 80px values in the editor (e.g., section padding and sticky top value) with the variable:

var(--stack-padding-top)

Now, if you need to change the padding, you only have to update the variable in one place.

Step 6: Testing Responsiveness

The stacking effect works great on mobile, but you’ll need to ensure the cards aren’t too tall. If a card’s height exceeds the viewport, users may not be able to scroll through its content before it fades away.

1. Check Card Heights:
   • Ensure the cards fit within the viewport on smaller screens.
2. Test the Effect:
   • Scroll through the section on both desktop and mobile to confirm the effect works as expected.

Browser Support

The view transitions used in this effect don’t have perfect browser support yet. As of now, they’re supported in Chromium-based browsers (e.g., Chrome, Edge) but not in Firefox or Safari.

Since this is a progressive enhancement, users on unsupported browsers will still see the cards stack without the animation.

Wrapping Up

This stacking card effect is a simple yet powerful way to add visual interest to your website. With just a few lines of CSS, you can create a dynamic, interactive section that works across devices.

While browser support for view transitions is still growing, this effect is a great example of progressive enhancement. It works beautifully in supported browsers and degrades gracefully in others.

I hope this tutorial inspires you to experiment with CSS animations in your own projects. Let me know how you plan to use this effect—I’d love to see what you create!