Advanced · ported from the GSAP demo

Continuous sections

A port of GreenSock’s Animated Continuous Sections demo: every wheel tick, swipe, or drag moves one full section, with layered wrappers sliding against each other, a parallax background, and headings that scatter in character by character. The original is vanilla GSAP; this version is signal view queries and injectGsap, nothing else changed.

ObserverSplitTextgsap.utils.wrap

Scoped

Reactive

Cleaned up

Yours

wheel or swipe inside the frame

<div #stage class="stage">
  @for (slide of slides; track $index) {
    <section class="slide" #slideEl>
      <div class="outer" #outerEl>
        <div class="inner" #innerEl>
          <div class="bg" #bgEl>
            <h2 #titleEl>{{ slide }}</h2>
          </div>
        </div>
      </div>
    </section>
  }
</div>

How this works

The layered slide is two nested wrappers tweened in opposite directions (yPercent 100 and −100 meeting at 0), while the background moves 15% against travel. Direction decides the sign, so up and down both feel right.
One Observer turns wheel, touch, and pointer into 'next' and 'previous'. An animating flag ignores input mid-transition; gsap.utils.wrap makes the ends loop.
Headings are split once with SplitText and each transition staggers the characters from a random order. All of it, the splits, the Observer, the tweens, dies with the component.