ScrollTrigger with Horizontal Scrolling

[bryanz13]

I'm trying to have slides of different lengths in the horizontal scroll example 

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

, although the panels seem to run over each other. It seems that the only way to stop this is to have panels of the same size, but is there any way I can have different panels? 

See the Pen xxJwWzz by bryanz13 (@bryanz13) on CodePen

[GreenSock]

Welcome to the forums, @bryanz13. 

 

That's because you're animating xPercent, and transforms are always relative to the element itself. So if you've got a bunch of differently-sized elements, they'd travel different distances. In other words, let's say elementA is 100px wide, and elementB is 500px wide. If you animate them both to xPercent: -100, that means elementA will move 100px and elementB will move 500px (because it's a percentage of their size). 

 

Here's how you could base it all on absolute pixels: 

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

 

Does that help? 

[bryanz13]

8 hours ago, GreenSock said:

Welcome to the forums, @bryanz13. 

 

That's because you're animating xPercent, and transforms are always relative to the element itself. So if you've got a bunch of differently-sized elements, they'd travel different distances. In other words, let's say elementA is 100px wide, and elementB is 500px wide. If you animate them both to xPercent: -100, that means elementA will move 100px and elementB will move 500px (because it's a percentage of their size). 

 

Here's how you could base it all on absolute pixels: 

 

 

 

Does that help? 

that works perfectly, thank you so much!