GSAP Horizontal ScrollTrigger behaving weirdly

[Tony Geek]

Hi there,

It's been a while since I've touched GSAP and it's ScrollTrigger, and have gotten a bit stuck trying to do a ScrollTrigger.

I've attached a CodePen that illustrates what's going wrong. Of course, I'm not expecting the transition to play out like that. What I'm trying to achieve is something more like this 

See the Pen KKBLqdN by PaulettePaillette (@PaulettePaillette) on CodePen

 - Where you horizontally scroll through each element, all inline. Instead, mine seems to zip off the screen with increasing speed. I recognize it's likely something to do with my maths somewhere, but I'm struggling to figure out where the issue is.

Any help would be much appreciated.

 

Thanks

See the Pen bGmMMMr by tonycre8-the-bold (@tonycre8-the-bold) on CodePen

[Cassie]

Hiya,

 

The code from the first demo would work here, unless you're trying to have a pause in between each item?

See the Pen VwExBME?editors=0010 by GreenSock (@GreenSock) on CodePen

[Tony Geek]

Hi Cassie,

Thanks a lot for the update. Not sure why I thought it wasn't possible by just copying the code 😂

Mind you, at the minute it ends on the last one. Is there any way for it to end on the last 4? I'm assuming that would be something to do with the end point, but not sure how I would adjust it. Or it could be the xPercentage, but again I'm not sure how I would do the maths on that as every time I've tried it hasn't quite filled in.

Thanks

[Tony Geek]

Alright I managed to figure it out. Don't know why I didn't clock it sooner.
Change: xPercent: -100 * (teamMembers.length - 1),
To: xPercent: -100 * (teamMembers.length - 4),
Thanks a lot for your help Cassie!