ScrollTrigger Horizontal scroll to the right

[LSchneiderman]

I'm using the vanilla codepen script attached to try to achieve horizontal scrolling going to the right instead of the left. Does anyone know how to do that?

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

[ZachSaucier]

Hey LSchneiderman and welcome to the GreenSock forums.

 

The main thing you'll need to do is position the section where its at its right most position to start. Besides that, the approach is pretty much the same. 

 

As for how to position the section where its at its right most position at the start, there are a lot of different ways of doing it depending on whether or not you need a particular order in your HTML and what CSS you are most comfortable using.

[LSchneiderman]

Hi, Zach,

 

The problem is, I want it so that when the user scrolls down, the content moves horizontally to the right. If I order the content from panel 5 to panel 1

See the Pen BaQvPKO by lschneiderman (@lschneiderman) on CodePen.

, when I scroll down, the panels still move from left to right instead of from right to left. I want the panels to start with 1 and move horizontally to 5, but in the -x direction. Does that make sense?

 

If I change the code to xPercent: 100 * (sections.length - 1), it moves in the right direction, but there are no panels to the left of panel 1 ...

[akapowl]

 

Hey @LSchneiderman

 

With flex-direction: row-reverse ( or alternatively flex-direction: row and direction: rtl ) on the sections and initially setting the sections to the end value of the original pen via gsap and then tweening them to 0 you should be good to go.

 

gsap.set( sections, { xPercent: -100 * (sections.length - 1) })

gsap.to(sections, {
  xPercent: 0,
  ...

 

Is this what you were looking for?

 

See the Pen c5fae34eea530215141e4987af16c075 by akapowl (@akapowl) on CodePen.

[LSchneiderman]

YES!

 

Thank you, @akapowl!