Scrolltrigger Initial State Visibility

[velkas 7 Likes (Newbie)]

I'm animating cards (checkpoints) on a horizontally scrolling roadmap and the cards fade in as they enter the viewport. The first three cards should be immediately visible because they are all either passed or very close to the end of their scrolltriggers (so their opacities would be ~1). These cards which should be initially visible actually fade in simultaneously only after the roadmap is pinned. How can I "evaluate" the initial animation state and ensure the cards at the beginning of the roadmap are visible on page load, not just after the pin is activated?

See the Pen WNJWBOG by connorhansen (@connorhansen) on CodePen

[alig01 81 Likes (Contributor)]

Hey, 

 

you are  almost there. The only thing missing is a condition that you check inside your loop.

checkpoints.forEach(function (cp, index) {
  if (index > 2) {
    gsap.fromTo(
      cp,
      {
        autoAlpha: 0,
        yPercent: 100
      },
      {
        yPercent: -50,
        autoAlpha: 1,
        ease: "none",
        scrollTrigger: {
          containerAnimation: scrollTween,
          markers: true,
          trigger: cp,
          start: "left right",
          end: "left center",
          invalidateOnRefresh: true,
          scrub: 1
        }
      },
      "+=1"
    );
  }
});

As an alternative, you could also manipulate your array before calling forEach(): Array Manipulation

[velkas 7 Likes (Newbie)]

Perfect, thanks!