I’m trying to make a React TSX component that will have 4 cards that will stack on scroll. I have been able to find the effect I want with pure Html CSS, but then when I try translate it to a react typescript component, it doesn’t do the scrolling or stacking, it just shows the 4 cards on after another. I really don’t know why it doesn’t work in the React tsx given it works for the pure html css. Any ideas?

This is the working HTML :

<div class="container">
        <ul id="cards">
            <li class="card" id="card1">
                <div class="card-body">
                    <h2>Card 1</h2>
                </div>
            </li>
            <li class="card" id="card2">
                <div class="card-body">
                    <h2>Card 2</h2>
                </div>
            </li>
            <li class="card" id="card3">
                <div class="card-body">
                    <h2>Card 3</h2>
                </div>
            </li>
            <li class="card" id="card4">
                <div class="card-body">
                    <h2>Card 4</h2>
                </div>
            </li>
        </ul>
      
    </div>

and the working CSS:

body {
    background-color: #2E3537;
    font-family: 'Poppins', sans-serif;
}

:root {
    --cards: 5;
    --cardHeight: 87vh;
    --cardTopPadding: 0em;
    --cardMargin: 4vw;
}

.container {
    width: 90%;
    margin: 0 auto;
}

#cards {
    list-style: none;
    padding-left: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(var(--cards), var(--cardHeight));
    gap: var(--cardMargin);
    padding-bottom: calc(var(--cards) * var(--cardTopPadding));
    margin-bottom: var(--cardMargin);
}


.card {
    position: sticky;
    top: 0;
    padding-top: calc(var(--index) * var(--cardTopPadding));
}

#card1 .card-body {
    background-color: #52B2CF;
}
#card2 .card-body {
    /* background-color: #7EC4CF; */
    background-color: #E5A36F;
}
#card3 .card-body {
    background-color: #9CADCE;
}
#card4 .card-body {
    background-color: #D4AFB9;
}

.card-body {
    box-sizing: border-box;
    padding: 30px;
    border-radius: 50px;
    box-shadow: 0 0 30px 0 rgba(0,0,0,0.3);
    height: var(--cardHeight);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s;
}

h2 {
    font-size: 8em;
}

And then this is my react tsx compoennt (where i import he same CSS stylesheet):

import React, { useEffect } from 'react';
import './StackCards.css';

const StackCards: React.FC = () => {
    

    return (
        <div className="container">
            <ul id="cards">
                <li className="card" id="card1">
                    <div className="card-body">
                        <h2>Card 1</h2>
                    </div>
                </li>
                <li className="card" id="card2">
                    <div className="card-body">
                        <h2>Card 2</h2>
                    </div>
                </li>
                <li className="card" id="card3">
                    <div className="card-body">
                        <h2>Card 3</h2>
                    </div>
                </li>
                <li className="card" id="card4">
                    <div className="card-body">
                        <h2>Card 4</h2>
                    </div>
                </li>
            </ul>
        </div>
    );
};

export default StackCards;

Any help would be greatly appreciated!

I tried, but I couldn’t replicate the sticky and stacking behaviour in react tsx. I even tried asking chatbots to not avail.