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

2 hours ago, mvaneijgen said:

thanks !

 

 

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

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:

1. 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.

2. 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.

 

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?

See the Pen BaELYJb by mmdwc (@mmdwc) on CodePen

[add Class to current anchor with horizontal scrolling]

hey there,

 

I'm trying to add a class to the current anchor, if it's clicked or by scrolling to the right position.

Can't figure out how to make it work despite all the infos I found online

can anybody help me with this ?

thanks !

See the Pen zYMvadK by mmdwc (@mmdwc) on CodePen