Box not sticking on pin

[AmanVerma]

Hey Everyone! Here's the problem
1. There's a red which has a green box below it

2. The green box has three cards in it which I want to scroll into view as I scroll down

3. They are scrolling into view but the red box above keeps going out the view during the scrolling action and I need the green and the red box to keep on touching

4. When I put all the classes of the boxes in an array, they were scrolling into view almost together

timeline.to(['.mini-card:nth-child(1)','.mini-card:nth-child(2)', '.mini-card:nth-child(3)' ], {
  y: (index) => finalpositionArray[index]
})

5. So I chained them like so: 

 

timeline.to('.mini-card:nth-child(1)', {
  y: (index) => finalpositionArray[index]
}).to('.mini-card:nth-child(2)', {
  y: (index) => finalpositionArray[index]
}).to('.mini-card:nth-child(3)', {
  y: (index) => finalpositionArray[index]
})

6. But the scrolling still keeps on introducing a gap between the red and the green box. How do I solve it? Thanks!

See the Pen VwNwMoy by amanopia (@amanopia) on CodePen

[Toso]

hi @AmanVerma in your demo  i would recommend using a loop and animating on Ypercent instead of y  it will be easier also take a good look at this post by @mvaneijgen  to get a good understanding of how stacking works 

 

 

another great demos 

 

 

 

See the Pen jOROjzb?editors=1010 by ahmed-attia (@ahmed-attia) on CodePen

 

 

 

also you can load gsap from here not in the HTML 

 

 

or just fork this one

 

See the Pen aYYOdN?editors=1010 by GreenSock (@GreenSock) on CodePen

 

[Rodrigo]

Hi,

 

If I understand correctly, just pin the parent element for both boxes:

const timeline = gsap.timeline({
  scrollTrigger: {
    trigger: ".div-2",
    markers: true,
    start: "top 20%",
    end: "bottom 20%" ,
    pin: ".parent-div",
    scrub: 0.2
  }
});

Here is a fork of your demo:

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

 

Hopefully this helps.

Happy Tweening!

[Toso]

@Rodrigo thank you,  🫡

i didn't see that he wanted to pin the red and green boxes I just saw the code and assumed he was having a problem with the green box 

[Rodrigo]

@Toso No problemo!

 

Thank you for all your effort and help in the forums! 🙌

[AmanVerma]

Thanks @Toso for adding those wonderful articles, they were really informative and I learned that one can also use  grid over position: absolute, since it also keeps elements in the flow of the document, and thanks @Rodrigo for helping with the solution, I totally skipped the part where it mentions in the documentation that `An element (or selector text for the element) that should be pinned during the time that the ScrollTrigger is active`  and focussed just on the property taking boolean values. Also the video by @Cassie gave me a totally new perspective on approaching scrollTrigger. I'll try to use "progressive enhancement" wherever I can. Thanks!