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

[mmdwc]

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

[mvaneijgen]

The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

• Personally I like my CSS to state the visible state of the items, so that I can use GSAP to antimate .from() some value to their final state. If you are worried about the "flash of in styled content (FOUC)" read the following https://gsap.com/resources/fouc/.
• You were having a .forEach loop, but then a stagger in your animation, this doesn't work. The loop gets you one time and a stagger needs multiple items to do its thing.
• Instead of a zero duration tween I like to set the ease: "steps(1)" which gets you an animation that gets form a progress of 0 to 1  in 1 step. 
• I've set your stagger to be twice as long as the duration, which makes it that every cards does nothing for 0.5 seconds after it has animated. 
• I've installed GSDevTools so that you can easily inspect your animation to make sure it is doing what it should do
• Your setup had one ScrollTrigger and one timeline for each card. Right now there is one timeline for all cards and a ScrollTrigger to control that one timeline. I've also made ScrollTrigger part of the timeline, so now it is even more clear which timeline it is controlling. 
• I've also placed some comments in your JS to explain certain properties, be sure to read thought them.

Hope it helps and happy tweening!  

 

See the Pen XWQjqLb?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[mmdwc]

2 hours ago, mvaneijgen said:

thanks !