GSAP’s Scroll Trigger Function Not Working in React App

feel free to test the behavior here: https://better-web-metrics.herokuapp.com/

I am just starting to use the GSAP 3 API. I am simply trying to have 3 cards animate from 0 to 1, when the user begins to scroll and the cards begin to enter or are completely in the viewport. But what’s happening is though the cards are out of the viewport frame, the animation begins automatically. It’s like the scrollTrigger object has been completely ignored.

What adjustments do I need to make here?
I’d appreciate it.
Ironman

main.js

import { gsap } from "gsap";
import {ScrollTrigger} from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

function init(){

    gsap.from("article", {
        scrollTrigger:{
            trigger:".cards",
        },
        stagger: {amount: 0.5},
        scale:0, duration:3
    })   
}

window.addEventListener('load', function(){
    init();
});

the html

<section class="cards">

              <article>
                <h1 class="cardHeading">Card 1</h1>
                <p id="aboutTxt01" className="aboutText" >
                "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium
                </p>
              </article>

              <article>
                <h1 class="cardHeading">Card 2</h1>
                <p id="aboutTxt02" className="aboutText" >
                "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium
                </p>
              </article>

              <article>
                <h1 class="cardHeading">Card 3</h1>
                <p id="aboutTxt03" className="aboutText" >
                "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
                </p>
              </article>
            </section>    
        </div>

the relevant css

 header {
    height: 99vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: calc(10px + 2vmin);
    color: white;
    position: relative;
    border: 2px solid green;
  }

  section {
    border: 2px solid red;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
  }

  article {
    width: 300px;
    height: 300px;
    border: 2px solid #4f5165;
    color: #293132;
    padding: 1rem;
    margin-top: -10%;
    margin-right: 1%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
  }