Trouble with order of ScrollTriggers

[MaxHere]

I'm having trouble with multiple scroll triggers in one section of the page (codepen linked)

 

The goal is to have each item stick in the middle of the page, pushing the previous item up one line. In this demo it works once I scroll the full page, and then scroll back to the top. But things are misaligned on the initial load.

 

The scroll triggers should be established in the order they appear on the page.

I've tried using ScrollTrigger.sort(); with no luck.

See the Pen RwmjQbb?editors=0110 by violetoffice (@violetoffice) on CodePen

[Rodrigo]

Hi,

 

This is mostly about the logic to create and set the ScrollTrigger instances for pinning the elements and moving them.

 

Maybe something like this:

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

 

Hopefully this helps.

Happy Tweening!