Hello, everyone!
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.
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?
