Sequencing two animation one after another using gsap scrollTrigger

[gsapnooby]

I have been trying to sequence two animation one after another using gsap. The first part of animation, bring the card one by one in the view on scroll and the second part of the animation make them scroll horizontal until you see the right most card hidden in the overflow. 

As you can see the codepen below I can't get this done correctly. There are several problems. First, I need to make the cards big enough to make them overflow the parent container. I dont know the way I am doing is correct or not. Second, sequencing the animation. Third, the section which holds the cards, scrolls up and the next section goes under the cards. It doesn't wait the scroll to end and unpin the section. 

 

See the Pen vYMNxKa by yumelabs (@yumelabs) on CodePen

[mvaneijgen]

Let's focus on one question at a time to prevent confusion and make answering more manageable. 

 

When pinning something ScrollTrigger will at empty space underneath the element you want to pin, to make scrolling still feel natural (because you're still scrolling) and set the element you pin to position: fixed. This empty space is needed for the effect to work, but what you can do is hide the empty space offscreen, so that you don't see it. In the demo below I've wrapped all your content in an element called .pinMe and used that as the pin element. So at the bottom of .pinMe will be a bunch of empty space, but because that is offscreen you'll not see it! 

 

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

 

Is this working as you expect? What is the next most proponent question you're having with this setup?

[Rodrigo]

Hi,

 

In this cases is better to pin the outmost HTML container and not just a specific section which, as you already found out, creates a space between that section and the next, which is not a bug but the way ScrollTrigger works.

 

Maybe something like this:

See the Pen YzMyroW by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[gsapnooby]

Thank you both. @Rodrigo mentioned I figured that out already but the next challenge is that horizontal scrolling. I cant make slow or slowly reveal rest of the card on scroll. 

[Rodrigo]

Hi,

 

Just give it a longer duration, that basically sets how much of the scroll distance covered by that scrubbed ScrollTrigger instance will be alocated to that particular instance:

gsap
  .timeline({
  scrollTrigger: {
    trigger: "#parent",
    start: "center center",
    end: "+=300%",
    pin: "#main",
    scrub: 1, // Smooth scrolling animation
    toggleActions: "play none none reverse",
    markers: true
  }
})
  .from(".card", {
  opacity: 0,
  yPercent: 100,
  duration: 1,
  stagger: 0.2, // Adjust the stagger time as needed
  ease: "Power4.easeOut" // You can change the easing function,
})
  .to("#child", {
  xPercent: -100,
  stagger: 0.2, // Adjust the stagger time as needed
  ease: "none",
  duration: 3
});

Hopefully this helps.

Happy Tweening!