ScrollTrigger - Pin, stack blocks, and then unpin

[Jon Kolko]

Hi,

 

I'm trying to create a page that has a pinning and stacking interaction:

 

1. As the user scrolls the page down and arrives at the blue section, the blue section and H1 title lock in place at the top
2. As they continue scrolling, box 1 drops from off the top of the screen to the bottom, and locks there 
3. As they continue scrolling, box 2 drops from off the top and stacks on top of box 1, and locks (like Tetris)
4. As they continue scrolling, box 3 drops from off the top and stacks on top of boxes 1 and 2 
5. As they continue scrolling, box 4 drops from off the top and stacks on top of boxes 1-3, and then all four boxes scroll up and off the screen
6. Blue section unpins and scrolls up like normal

 

I think I know why this isn't working - that all four ScrollTriggers are conflicting because they are targeting the same pin element - but I don't know how to fix it. 

Thanks in advance to anyone with ideas. 

Jon

 

See the Pen vYrMLpO by jkolko (@jkolko) on CodePen

[alig01]

Hey,

 

you need a timeline in which the boxes are moved sequentially to your desired positions. To do this, you can create an array with the box elements and iterate over them.

Furthermore, you might consider creating a layout directly where the boxes are stacked on top of each other to make the animation easier (optional).

 

See the Pen WNyWxXb?editor by alig01 (@alig01) on CodePen

 

Hope this helps.

[Jon Kolko]

Fantastic. Thank you very much.