Horizontal Scroll

Create horizontal scrolling sections.

HTML

<div class="container">
  <section class="panel red"></section>
  <section class="panel blue"></section>
  <section class="panel green"></section>
</div>

CSS

.container {
  display: flex;
  width: 300vw;
}

.panel {
  width: 100vw;
  height: 100vh;
}

GSAP

let sections =
gsap.utils.toArray(".panel");

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

  ease: "none",

  scrollTrigger: {
    trigger: ".container",
    pin: true,
    scrub: 1,
    end: "+=3000"
  }
});

Result

Scroll Down

Panel 1 → Panel 2 → Panel 3

Instead of vertical movement.

let sections =
gsap.utils.toArray(".panel");

Converts all panels into an array.

[
  redPanel,
  bluePanel,
  greenPanel
]


gsap.to(sections, {

Animate all panels.

xPercent

xPercent: -100 * (sections.length - 1),

Let's calculate.

We have:

sections.length = 3

Therefore:

-100 * (3 - 1)

= -200

Result:

xPercent: -200

Why -200?

Initially:

[Red][Blue][Green]
 ^
 Visible

After moving:

[Red][Blue][Green]
             ^
 Visible

Need to move:

100% for Blue
100% for Green

Total:

200%

Hence:

xPercent: -200

Negative means move left.

ease

ease: "none"

No acceleration.

Required for smooth scroll syncing.

ScrollTrigger

scrollTrigger: {

Creates scroll-based animation.

Trigger

trigger: ".container",

Animation begins when container reaches viewport.

Pin

pin: true,

Pins container.

Normal scrolling:

Scroll ↓

Section passes away

Pinned:

Scroll ↓

Section stays fixed

This allows horizontal movement while page is still scrolling vertically.

Scrub

scrub: 1,

Links animation to scrollbar.

Without scrub:

Trigger
 ↓
Animation plays automatically

With scrub:

Scroll 20% → Animation 20%

Scroll 50% → Animation 50%

Scroll 80% → Animation 80%

Perfect synchronization.

End

end: "+=3000"

Meaning:

Continue animation
for 3000px of scrolling

Why Need End?

Without enough scroll distance:

Scroll
 ↓
Animation ends too fast

With:

end: "+=3000"

User gets enough space to see:

Red → Blue → Green

Final Flow

Page Scrolls

      ↓

Container Reaches Screen

      ↓

Pin Activated

      ↓

Vertical Scroll Continues

      ↓

Panels Move Horizontally

      ↓

Red → Blue → Green

      ↓

End Reached

      ↓

Pin Released