GSAP and ScrollTrigger Animation: Initial element Visible and Delaying Animation Start

Question

I'm working on a project where I have a section containing four cards that are initially hidden and are supposed to become visible one after the other. This should happen after the container (#cards-flop) is pinned in the viewport during scrolling. However, I'm facing two issues:

Immediate Visibility of the First Card: As soon as the #cards-flop container enters the viewport, the first card (#card-1) is already visible, contrary to my intention of having all cards initially hidden and then revealing them sequentially through animation.

Delaying the Start of the Animation: I want the animation of the cards revealing themselves to start a few seconds after the container has been pinned, but I'm struggling to implement this delay effectively.

Here’s a brief overview of my setup:

HTML Structure: I have a #cards-flop section containing four .card divs.

CSS: Initially sets .card elements to opacity: 0 to hide them.

JavaScript (GSAP and ScrollTrigger): I'm using GSAP for the animation and ScrollTrigger to pin the #cards-flop section and trigger the animation when it's fully in view.

gsap.registerPlugin(ScrollTrigger);

let container = gsap.utils.toArray("#cards-flop");
container.forEach((container) => {
  let card = container.querySelectorAll(".card");
  let tl = gsap.timeline({
    paused: false
  });

  tl.fromTo(
    card,
    {
      opacity: 0
    },
    {
      stagger: 0.2,
      opacity: 1,
      ease: 0,
      duration:0,
    }
  );

  ScrollTrigger.create({
    trigger: "#cards-flop",
    start: "top top",
    end: "center -200%",
    animation: tl,
    pin: "#cards-flop",
    scrub: true,
   toggleActions: "play pause resume none",
    markers:true,
  });
});

here's a link to a codePen : https://codepen.io/mmdwc/pen/BaELYJb

I've tried adjusting the GSAP timeline and ScrollTrigger configuration without success. Can anyone help me figure out why the first card is visible prematurely and how to introduce a delay in the start of the animation after the container is pinned?