Hey, so only been using GSAP since last week but already having a blast with it! I'm playing around with ScrollTrigger to create a fade in / fade out effect on cards and as you can see in the Codepen link it all works as expected using the next cards height as an end point. Firstly, is this right way to get the start and end trigger points aligned so that the next trigger starts at the same point as the previous end trigger? Secondly, I'm using the same code from Codepen on the site I'm working on, but it doesn't line up as nicely as the Codepen example, any reason why? Attached a photo of the misalignment.
Any suggestions are welcome!
EDIT / P.S when the div is wrapped in the ScrollTrigger wrapper it cancels out any :nth-child CSS selector (was using it to reverse the card layout), any ways around this without making another class selector?