How to pin the parent block until the inner animations complete? How to make animations consistent?

[tortur33]

Hi guys, tell me please, how can I fix (for scrolling) the parent block while scrolling the page while animations for adding cards occur in it?
how the cards should be attached to the scroll.
https://prnt.sc/eeC9wqiOLlmk
https://prnt.sc/b5rXoRhw2ylP
Cards should slide out from left to right, occupying a layer position. The next card should start its animation when the previous animation has ended.
As a result, you need to get the following result
https://prnt.sc/kM2Mre1NgwyW 
After that, the parent block needs to be fixed and continue scrolling the page in normal mode.

Here is my not so good code

const cards = document.querySelectorAll(".key-feature__box");

cards.forEach((card, index) => {
gsap.to(card, {
  scrollTrigger: {
    trigger: card,
    start: "top center",
    end: "bottom top",
    markers: true,
    scrub: true,
    pin: ".app__page",
  },
  x: index % 2 == 0 ? -668 : -500,
  y: 32 * index,
});
}); 

 

what we have at the moment

 

I really hope for your help

[Cassie]

Hi there!

My advice would be to use staggers - https://greensock.com/docs/v3/Staggers

 

Happy to help further but it would be really useful to see a minimal demo of this - no need to include your whole project. Just some colored <div> elements and the GSAP code is best. Then we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

[tortur33]

On 6/6/2022 at 4:52 PM, Cassie said:

Hi there!

My advice would be to use staggers - https://greensock.com/docs/v3/Staggers

 

Happy to help further but it would be really useful to see a minimal demo of this - no need to include your whole project. Just some colored <div> elements and the GSAP code is best. Then we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Hi Cassie, thanks a lot for your reply!
I roughly typed in the code.
Right now I have main blocks and sub blocks in the first main.
I need to do so until the scrolling of subblocks is completed. The second big block did not appear.
Now this is implemented on selected values, but I need a universal solution.
I hope for your help

See the Pen eYVPRdj by faychaka (@faychaka) on CodePen

 

[tortur33]

@Cassie can you help me?

[Cassie]

Hi there! So sorry this flew under the radar.

I'm still a little foggy on what it is you're trying to do though I'm afraid. The screenshots you've provided don't really match up with the structure of your pen. Your description also says that you want to fade elements from left to right but your example is using the Y axis and animating them from bottom to top.

Going on your first description, maybe this thread is useful?